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I We are in 
favour of 
responsive web 
when possible ft 

We join Lost Boys International 
in Copenhagen to find out 
exactly what they mean when 
they say they want the agency 
to grow wise, but never grow 
up. Page 30 


It’s time to stop waiting and start coding 


hough HTML5 has been on the lips 
of web developers since 2004, it 
wasn’t until Steve Jobs’ 
controversial open letter of April 
2010 that it truly hit the front pages 
of the mainstream media. While 
Thoughts on Flash' was a swipe at 
Adobe's Flash, it’s specific citing of 
HTML5 as a natural successor fanned some already 
sizeable flames. 

That said, HTML5 is still an emerging standard with 
various killer features still yet to be implemented by 
certain browser vendors. This has, unsurprisingly, led to 
a reluctance within the design community to commit to 
HTML5, but we think doing so would be short-sighted. 


There are still many ways we can embrace HTML5 to 
create next-gen features, and to demonstrate the point 
we've come up with five key areas where you can 
implement cutting-edge HTML5 code without the 
worry of compatibility issues. Hardware acceleration, 
geolocation and embedded audio and video are just a 
sample of what can be done to future-proof your site. 
Turn to page 38 to get started today. 

If this issue isn't exciting enough, we have lots of 
surprises in store next month in issue 200. Keep an eye 
on our website to see how you can appear in this historic 
issue, which will hit the shops in August. There’s so much 
happening, we might even have to enlist the help of a 
special guest editor to help cram it all in... 

Russell Barnes 


## There are 
many ways we can 
embrace HTML5 to 
create next-gen 
features •• 


Follow us on Twitter for all the news & conversation Q @WebDesignerMag 
Visit our blog for opinion, freebies & more© www.webdesignermag.co.uk 
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Excitographic 

Plotting the features that got us 
in a frenzy over the month... 

A Steve Jenkins, Features Editor 
A Russell Barnes, Editor 
A Daniel Duke, Designer 
A Ben Martin, Sub Editor 


Turn over to the contents to 
discover what’s going to get you 
excited this issue... 
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I contributors 


This issue’s panel of experts 


Welcome to that 
bit of the mag 
where we leam 
more about the 
featured writers 
and contributors. 


•I Sam looks at how 
to ensure websites are 
ready for today and 
tomorrow ii 



A keen supporter of web standards, Sam loves getting the most out of 
HTML and CSS. This month Sam looks at HTML5 and the key techniques 
needed to ensure that websites are ready for today and tomorrow. You 
can follow Sam on Twitter via @samhs. Page 38 



Pete Simmons Andy Budd Mark Shufflebottom 


Pete specialises in front-end 
development PHP and 
social APIs. This month he 
tackles the Twitter API and 
offers an essential selection 
of tips and techniques that 
every designer/developer 
should know. Follow Pete on 
Twitter @terrorfall. Page 80 


Jake Rutter 


Andy Budd is the user 
experience director at 
Clearleft and the main man 
behind UX London, the UK’s 
first dedicated usability, 
information architecture and 
UX design event. This issue 
he talks UX Design in an 
exclusive interview. Page 72 


Matt Gifford 


Mark is the programme 
leader of BA (Hons) Digital 
Media Design at 
Bournemouth University. 

He explores using Flash CS6 
to publish rich animated 
content to the Canvas 
element of HTML5 with the 
CreateJS Toolkit. Page 44 


Kieron Howard 






Jake is a front-end 
developer and 
user-interface designer from 
Connecticut, with over ten 
years' experience in HTML. 
CSS and JavaScript. This 
issue he delves into mobile 
web development using 
jQuery and Mobify. Page 48 


t Matt is a lead RIA consultant 
developer who specialises in 
ColdFusion. Flash and AIR 
development. This issue he 
takes a closer look at PHP 
CodeSniffer. A development 
tool that ensures PHP code 
remains clean and 
consistent. Page 90 


Kieron is a web developer 
that resides in the Imagine 
Publishing Interactive 
department. This issue he 
■TL brings us the second 

tutorial on how to create an 
app with Yahool’s fresh new 
JavaScript framework. 
Mojito. Page 86 



Robin De Jongh Adam Smith 



Experienced 3D designer 
and CAD jockey Robin de 
Jongh has written two 
books on Google SketchUp. 
This issue he shows us how 
to create a 360 degree 
product widget for 
eCommerce pages using 
Google SketchUp. Page 52 



Adam transfers his skills 
from our sister magazine 
Advanced Photoshop 
across to Web Designer. He 
demonstrates how to create 
a popular current trend in 
the form of 2D circular 
shapes in one of this issue's 
Web Workshops. Page 66 
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Got 
web skills? 

O 


We’re always looking for the . 
hottest web-design talent. Email 
webdesigner@imagine-publishing.co.uk 
with examples of your creative work 
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POWER THAT YOII CONTROL! 


1&1 helps you manage your business with 
flexible server performance: 

■ JIT 1 ! Adjust server power on demand to meet the needs 

of your business 

■ (T HT H Add and manage up to 99 virtual machines under 

one contract 

■ (^Enhance performance with up to 6 CPU, 24 GB RAM 
and 800 GB hard disk space 

■ Hourly billing for total cost control 

■ fTT^TT! Monitor and manage your server 
with 18i1 mobile apps 
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Cutting-edge features, techniques and inspiration for web creatives 


Chat with the team and other readers and discuss the latest tech, trends and techniques. Here’s how to stay in touch... 

O webdesigner@imagine-publishing.co.uk O @WebDesignerMag © www.webdesignermag.co.uk 



Inside... 

20 Lightbox 

Three sites that make the web a better place 
including ONLY because we can 

26 Design diary: Fi 

This month’s design diary see's us riding the 
development cycle of Fi's Re: Brief 

30 Pro file: LBi 

This issue we sit down with the Danish wing of 
digital masters Lost Boys International 

36 Blog beautiful 

A roundup of the best in understated design 

38 Cover: Next-gen HTML5 

Sam Hampton-Smith proves that it’s possible to 
utilise HTML5 without the worry of compatibility 

68 Design cloud 

24 websites with beautiful fonts & typography 

96 Portfolio 

Three more rising stars in the web world 

104 Hosting listings 

Check out the latest domain-based deals 

114 Style relic: YouTube 

The world’s most popular video service still 
owes a debt of gratitude to its early design 
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Discussing the hottest topics 
from the web-design world 

8 Could Mozilla topple Safari? 

As Mozilla prepares to launch its Junior browser 
on iOS, we consider Safari’s chances of survival 

12 Crowdsource 

We respond to your latest letters and tweets 

14 Comment: Jason Beres 

Are HTML5 media resources all we have been 
told to expect? 

16 Comment: Patrick Algrim 




Pro file: Lost Boys International 

Web Designer travels to Copenhagen to talk to LBI 
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The product designer gives sound advice on 
how to conceptualise webapps 


Inside UX Design 

Andy Budd reveals the secret of great interfaces 


Lightbox: ONLY because we can 

Is enhanced customer participation the key? 
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of free designer resources! 

• 160+ minutes of video tutorials 
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• Architekt WordPress theme 
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Get animated Step up to the turntables 

Use CS6 to publish HTML5 animations Make product turntables with SketchUp 
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MOBIFY 
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Mobify your content 

Build mobile-friendly sites in a flash 


<tutorials> 

Web gurus take you step-by-step 
through professional techniques 
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Create animations for HTML5 
Canvas in Flash CS6 

If you want rich, animated content on an iPad webpage, 
this tutorial will make your workflow much easier 

Build a mobile website using 
jQuery and Mobify 

Learn how to use Mobify to quickly build a simple 
three-page website for the small-screen 

Create an iOS or Flash turntable 
with Google SketchUp 

Build an eCommerce product turntable for web and 
mobile using nothing but free tools 

Create multi-column layouts 
with CSS 

Create a simple and elegant multi-column layout 
with Dreamweaver 


r .tueb- 

tdeveloper; 

Dedicated 16-page section offering 
features and tutorials for coders 
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Multi-column made ea 

Make elegant multi-column layouts 


Re-creating the 
web’s hottest styles 

Creative web headers 
with Google Ventures 

MarkShufflebottom 
demonstrates excellent 
header design drawing 
inspiration from 

www.googleventures.com 


66 Circular web 
design trends 

Adam Smith uses 
www.dotmick.com to show 
us how circular themes can 
revolutionise your project 


Feature 

Develop with Twitter 

Discover how to get to grips with the Twitter API, 
before integrating features into your web project 

86 Build an app using Yahool’s 
Mojito framework (part 2) 

Kieron Howard concludes his series on creating an 
app with Yahool’s new JavaScript framework 

90 Check your PHP code with 
CodeSniffer 

Make sure your code meets standard coding 
guidelines using this excellent tool 
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Discussing the hottest topics in the web-design world 

If you have a creative project, new web product or great designer story, contact the editorial desk 

O webdesigner@imagine-publishing.co.uk 0@WebDesignerMag 



Could Junior be set 
to topple Safari? 

Safari has been king of the iPad browsing 
experience since day one. But is it time for 
Safari to move over as Mozilla prepares 
to launch its Junior browser for iOS? 


S afari has been synonymous 
with the iPad since the day it 
launched. But there is a host of 
alternative browsers on the market that 
could be argued are better than the 
default. The option to move away from 
Safari and adopt an alternative is not 
taken often due to the fact that there’s 
nothing inherently wrong with Safari on 
the iPad - apart from the lack of Flash 
support, of course. 

The relationship between the iPad 
and Safari is reminiscent of the EU 
anti-trust case that Internet Explorer 
encountered. It had a monopoly that 
meant other browsers didn’t get a look 
in. The same could be said for the iPad 
and Safari, except the big browser 
vendors do not have iPad versions 
(apart from Opera and Chrome). 

Currently, the alternatives to Safari 
Mobile come in the shape of apps found 
on the Apple App Store. This provides 
competition, but Apple won’t be 
shedding any tears or unduly panicking 
that the end is nigh for Safari Mobile. 
The majority of the Safari alternatives 
are free, but even then Apple still 
collects the developer fees needed to 
create a browser. Plus, for any browser 
apps that do command a fee Apple will 


be getting a 30 per cent cut. In some 
ways, this could be construed as more 
of a monopoly than the Microsoft case. 

So what do the alternatives have to 
offer? A look at the boxout over the 
page offers a selection of browsers and 
gives an insight into what a user can 
expect. Many of these alternatives are 
free, so are always worth a try. It’s no 
secret that Apple devices do not run 
Flash, and there are a number of 
browsers that do offer Flash support. 

A closer look at the alternatives 
reveals - primarily due to their absence 
- that the major browsers are not 
offering much competition to Safari on 
the iPad. There’s no Internet Explorer for 
the Apple tablet - no surprise there, 
Google Chrome has just made an 


Mozilla recently gave 
an insight into a 
functional prototype via 
its Air Mozilla blog. 

Currently known as 
Junior, this is ‘an iPad 
browser that makes 
browsing more fun, 
more ergonomic and 
rethinks browser user experience from 
the ground up’, allegedly. 

Junior is a browser that Mozilla hopes 
wilt take over from Safari. So what does 
the new browser hope to bring to the 
iPad? It is going to be a full-screen 
experience, so no address bars or tabs 
cluttering up the top of the interface. 
Users will also be able to create 
accounts to enjoy private browsing. To 



However, adding another browser 
raises the same questions that always 
seem to appear: what support does it 
offer and how will pages render in it? 
Will designers and developers need to 
learn the little nuances that come with 
the browser to ensure a complete iPad 
experience? Chrome is working like it 
has always been on the iPad, and you 
would think Mozilla will have already 


[Junior] makes browsing more fun, more 
ergonomic and rethinks the user experience 


appearance and currently there’s no 
Firefox. However, things are about to get 
shaken up. The new Chrome app is 
proving very popular and Mozilla is 
looking to take on Safari in the iPad 
browser battlefield. 


view the whole 21-minute presentation, 
visitair.mozilla.org/product-design-at- 
mozilla. And when exactly will Junior 
make its way onto the iPad? At the time 
of writing, the best guess, unfortunately, 
is just ‘soon’. 


identified any issues and made sure all is 
well. If not, we’re sure that they will be 
informed very quickly! 

So now we know that Chrome for iOS 
has been launched, it’s fair to say Safari 
had better watch its back. 
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10 Safari alternatives 

The default iPad browser is not the only 
option for browsing available. Here are a 
few of the better alternatives... 



Opera Mini (Free) 

A popular alternative to Safari that makes use 
of compression technology to deliver pages in 
double-quick time. It also offers tabs. 


Rating: 

4/5 


Dolphin Browser (Free) 

Both speedy and intuitive. Dolphin is packed Rating* 
with a host of killer features including tabbed 
browsing, sidebars and a full-screen mode. 


2/5 


Atomic Web Browser (£0.69/$0.99) 

Enabling users to experience the desktop when Rating: 
mobile; Atomic offers tabs, multitouch gestures, 
a full-screen mode, ad blocking and video out. 


4/5 


Mercury Web Browser (Free) 

An elegant browser for both iPad and iPhone. 11 Rating: 
themes offer a bespoke Ul. plus there is tabbed A 

and full-screen browsing, and file-management. 9 

Yahoo! Axis (Free) 

A new US-only offering from Yahoo! that brings Rating: 
with it a customisable homepage and works A /P 
with your favourite desktop browser. " 1 / ^9 



Terra (Free) 

A fast browser that offers features like unlimited Rating: 
tabs, full-screen browsing, text searches, 
desktop browsing and password protection. 


3/5 



| Chrome keeps in tune with the desktop version Rating: 
with a clean interface. Tabbed browsing is well 
thought out, as is browsing incognito. 


5/5 


iCab Mobile (£1.49/$1.99) 

iCab offers the popular search engines and Rating: 
in-page searching. It supports Dropbox too, so 
you can share bookmarks and files in the cloud. 


4/5 



PERFECT Web Browser (£1.49/$1.99) 

Comes with unlimited tabs, a printing utility, TV Rating: 
out, page compression for faster downloads, 
custom font sizes and viewing page sources. 


3/5 


iS wifter Flash Web Browser (Free) 

Amazingly allows for the viewing of Flash on Rating: 
the iPad. After the evaluation period of seven 
days, you can upgrade via an in-app purchase. 


3/5 





COMMENT 

Stephen Ashby 

iCreate magazine 

& 1 & Mobile browsing isn’t quite as easy as on a desktop 
" machine , as th e w eb has evolv ed t o support a precise 
mouse-click rather than a selection using a finger. Safari for 
iPad manages to bridge this gap to some extent, however, by 
adding some fantastically intuitive mu ltitouch co ntrols. 
Links are easy to hit with even the chubbiest of fingers and, 
thanks to many websites now optimising for the iPad, 
cont ent is r eall y wor kin g we ll on the tablet. 

However, while many users will only ever use Safari, there 
are plenty of alternatives t h at offer a different experience. 
Dolphin Browser will save vour passwords for logging in to 
pages fast, while Mercury offers mutlitouch gestures that 
enab le you to swipe backward s and f orwards. Safari might 
be the default choice for a lot of people, but it's by no 
means vour only option when browsing on the iPad. 


Mozilla for Android 

Firefox may not have made it to the iPad, but Android 
has embraced the popular desktop br owser 

The official Firefox web browser, recently updated, ■»' 
helps bring the best of desktop browsing to the |B|^p 

Android platform. Users can download and install the 
free Firefox app from the Google Play store. What do BA 
users get? A fast, secure, intuitive and easy-to- ^ 

customise browser that provides a more than viable > 

alternative to the default browser and Google Chrome. 


Web access by hardware 

More and more of us are browsing on mobile 
devices but the desktop still reigns supreme 

18% 

Smartphones • 

Conclusion 

The desktop is clearly still king 
when accessing the web and this 
trend will continue for a long time 
yet. Very few companies conduct 
their online business solely via a 
smartphone or tablets. However, 


portable devices now make up a 

significant percentage of internet 

access. This fact reinforces the 
need for designers/developers to 
think mobile when putting together 

7% 

both personal and client websites. 

Tablets 

750/ 0 Source: chitika.com 

Desktops 
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Discussing the hottest topics in the web design world 


Who wants a 
new gTLD? 

Generic top-level domains are set to expand 
rapidly with Google, Apple and a host of 
technology giants looking to get personal 


D ecent domain names are 
becoming more and more 
precious. A quest to find a .com 
that matches a brand is becoming 
harder and harder, as more and more 
names are snapped up. To overcome this 
issue. ICANN (Internet Corporation for 
Assigned Names and Numbers) 
developed the New Generic Top-Level 
Domain program, which looks to 
introduce more choices for both business 
and the consumer. 

There are currently 22 gTLDs (generic 
top-level domains) in existence, but it is 
still the big ones, or is that the big one, 
.com, that most want. Sitting alongside 
.com, the core group is .info, .org and .net. 
The remaining names include .biz, .mobi, 
.travel, .xxx and .edu. How often do you 
see these on the web? 

There is no doubt that it is the core 
group of gTLDs that still get all the glory, 
but ICANN's desire to expand the group 
recently saw a swath of applications for 
new gTLDs. In total there were 1930 new 
names, with nearly 50 per cent coming 
from North America and around 30 per 
cent coming from Europe. So, who or 
what is in the mix? There are plenty of big 
names, and not so big names, in there. 
Google, Epson, GoDaddy, Apple, Amazon, 
Nike, Yahoo! and YouTube have all been 
registered. Google have been busy, not 
just satisfied with .google they have also 


registered .lol, Jove, .chrome, .ads, ,app,. 
are, and .baby to name a few. 

Beyond business names there are a 
host of applicants vying for the more 
obvious and popular. A few that instantly 
standout are .basketball, .app, .bet, .blog 
(Google has applied for this one as well), 
.book, .casino, .cloud, .design, .gay, .home, 
.lie, .movie, .site, .soccer and .web are 
included in the line up. 

Obtaining a new gTLD is not a cheap 
affair. Registrants had to pay $5000 just 
to register, with a further final payment of 
$180,000 when an application is 
successful. Add in a rumoured fee of 
$25,000 per year to keep the domain and 
there is a pretty packet to be made. Just 
looking at the applicants who are not 
going to be successful - not everyone can 
own the same domain - there is 
thousands of dollars just there. 

So, what are the benefits for your 
average web designer, developer or 
consumer? The price tag immediately 
negates the joy for many of owning a 
domain they belongs to them. But, now 
there is the potential to own a domain 
name that doesn't fit in with the current 
crop. Will Google be entering the domain 
market or will they be keeping their new 
TLD’s to themselves? 

Whatever the outcome of the gTLD 
lottery, you won't be finding a 
.webdesigner domain in the near future. 



Great digital mags 


Visit greatdigitalmags.com to get Web Designer on 


your favourite digital platform 


Web Designer, the premier magazine for aspiring online creatives has teamed up 
with Zinio, the leading digital publisher, to offer more options for getting your 
favourite magazine delivered in the format 
you want. Imagine Publishing's new 
partnership with Zinio means that Web 
Designer is now available for PC, Mac, iPad, 
iPhone, Android, Blackberry and Web OS. 

This means wherever you are, you can get 
the latest cutting-edge practical projects, 
features, interviews and inspirational design 
showcases at your fingertips. 

Zinio provides the apps (gb.zinio.com/ 
apps/index.jsp) needed to get the best 
on-screen reading experience, while Web 
Designer provides the unmissable content. 


Explore the galaxy 

The most exciting space magazine ever unveils 
its second issue 

Packed full of cosmic content, All About Space delves into the wonders of space 
exploration, astronomy and space science every month, providing in-depth 
knowledge from a team of experts on an amazing array of topics. The magazine is 
unlike anything out there and will appeal to seasoned fans and new explorers alike, 
with a regular dose of amazing articles, exclusive interviews and jaw-dropping 
image, making each issue unmissable. The latest issue takes an in-depth look at the 
Mars Science Laboratory. Discover how 
humanity’s most ambitious mission, the 
Curiosity rover, will perform the greatest 
search for life on Mars yet. Plus, twenty 
mind-blowing facts about the universe, 
the ten most amazing spacecraft, and 
more - as well as our regular Q&A and 
stargazing sections. Get the print 
version from the Imagine eShop at 
www.imagineshop.co.uk, a digital copy 
from www.greatdigitalmags.com. 
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Microsoft Software 

Ci 1 r 0^0 giant joinsthe 
O LT1 1 Ct M M touch tablet 
revolution 


Bite-sized coverage of the month’s trending topics 

Brightcove launches free HTML ^ 
mobile app development platform D-r-j aVlfpnVP 

Brightcove has launched App Cloud Core - a free, ^ ^ ^ O ^ V vI. 

open-source edition of its app development platform, 

App Cloud. This allows developers to use HTML5 and 
JavaScript to develop apps for iOS and Android. The 
SDK has a suite of technologies for building, testing Version 3.4 brings theme customisation 

and publishing. Find out more at bit.ly/mzmMSY, 


CSS3 FlexBox 


-cm 

Does no Flash for 
Jelly Bean spell 
the end? 


C 


Adobe Flash 

WordPress ^ Google 

Version 3.4 brings theme customisation 

\ 


improvement and better Twitter integration The seven-inch Nexus tablet is available now 


CSS3 FlexBox 
nears completion 

The CSS3 FlexBox module, officially 
known as the CSS Flexible Box Layout 
Module, is on its way to the finishing 
line. The module has reached the last 
call working draft and the deadline for 
comments has passed. So, what does 
this mean? It means the FlexBox spec 
should be finished within the next 
couple of months and supported by 
the major browsers soon after. 
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Scale down! 

Technology on demand! 

TOOM.lOttORRO'N&TOOnWt 

Looking for a provider who can scale their solution to suit your needs? 

With Fasthosts cloud solutions you are able to make changes to suit 
your requirements, when needed. You don’t have to outlay significant 
upfront investment - your technology grows with you. 

With over 13 years’ experience in providing award-winning technology, 
we are dedicated to the development of cloud solutions. Providing 
the power, performance and security you demand. 

For more information on how Fasthosts can help your 
vision become a reality, call free on 0800 6520 444 
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Technology on demand 

today, tomorrow and the future 


WEB HOSTING • DOMAINS • EMAIL • DEDICATED SERVERS • VIRTUAL SERVERS • RESELLER HOSTING 


fasthosts 


Making business work better online 


fasthosts.co.uk 

or call 0800 6520 444 t (3 CJ ® 3 
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Your emails, tweets, forum comments. The social network but in print 

This month we discuss WordPress security, the importance of web fonts, and how best to train as a designer or developer 


subject WordPress Security 

From Angus Duff 




I have been a WordPress user for a few years now and I have never 
really given much consideration to my site security. I have always 
assumed that the people behind WordPress had this under control 
and I had nothing to worry about, as long as I didn’t let anyone know 
my password. However, after reading ‘WordPress Security’ in Issue 
1971 realized that I need to make a bit more of an effort to secure my 
WordPress. There were plenty of tips in there which I have 
implemented and others that I will attempt at some point in the 
future. After reading I now feel much happier about the safety of my 
site. Thank you. 


Security is a topic that often gets 
forgotten, but it is an essential 
element of the WordPress lifecycle. 
We are glad that you found the 
feature useful and informative. 
WordPress users should make sure 
that they update their install when 
new updates become available, and 
of course take note of the tips offered 
by Leon Brown in the feature. 



Web 
Designer 
tutorials 

Discover the 
techniques to help 
create inspirational 
and interactive 
webpages 

->0 

Build a responsive 
image slider with jQuery 

bit.ly/LfmnK6 


subject Long live the 
essential wel 
font 

From Harry Spencer 


lb 




Create a 3D image gallery 
withCSS3 

bit.ly/JWrRa6 



Vector-style infographics 
with Photoshop 

bit.ly/qJ8dvc 


Web fonts and typography are 
now essential to my design 
process. I generally choose a font 
I love and base a page design 
around it, or make sure I choose 
the right font to make a project 
that I am working on. 

The article in Web Designer 
198 on fonts was just what I was 
looking for to help me further my 
love for typography. 

So I thought I would share 
with other readers some of my 
favourite fonts that they should 
take a look at. Open Sans and 
Open Sans Condensed, both free 
Google Web Fonts, are a great 
family of fonts with plenty of 
options. Another that I love is the 
Novecento family and a more 
obscure offering is Dmitri and 
Dmitri Swank, a free font that can 
be found via Urban Fonts (www. 
urbanfonts.com) 

Fonts are definitely a much 
more integral part of the web 
design process than they used 


to be. Thanks for the 
suggestions, and we have to 
say they are definitely good 
choices. A couple that we really 
like are Russian (there is a clue 
in the name), which can be 
found at www.dafont.com, and 
Bambi, found on Urban Fonts. 

subject Web design/ 
developer 
training 

From Doug 


Can you please help on web 
design/developer training? 

I’ve been messing with web sites 
for about ten years at a very 
amateur level. 

I've been a subscriber of your 
mag for over a year now and, 
unlike lots of your regular 
correspondents, I can't say that 
your mag is the best thing since 
sliced bread. It’s not bad, but not 
excellent in my view. 

My nephew asked me to 
update his business (European 
language translation services) 
website about 18 months ago 
and, after that project, I realised 
that I needed some extra 
knowledge of JavaScript so I did 
a correspondence course in 


JavaScript last autumn gaining 
the equivalent of an A level in it. 

Now, I'm looking at CMS and 
realising that there are other 
things I need to learn about, 
possible PHP or something else. 

So, in the last 18 months or so 
that I’ve been a subscriber of 
your mag I’ve been expecting 
some sort of analysis of the 
training or qualifications that web 
designers should be striving for 
to help them become web 
professionals. Many of your 
articles appear to present 
qualified web designers as 
people that learned all the 
coding cleverness in their 
bedrooms rather than 
specialised courses. So, if we’ve 
not spent too much time in our 
bedrooms, what training/courses 
do you suggest? 

Web Designer has a breadth of 
readers including professionals, 
students and newcomers, and 
we hope to offer something for 
all of these. If you are looking to 
take on PHP there are a 
number of options. Check your 
local university/college, take up 
an online course such as 
O’Reilly’s (the book publisher) 
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Join the conversation as it happens on Twitter Q @webdesignermag 
Comment on the news and opinion © www.webdesignermag.co.uk 
Email the editorial team at O webdesigner@imagine-publishing.co.uk 


School of Technology - 
(www.oreillyschool.com) or invest in 
course of video tutorials at Lynda.com. 

subject Diseno Web Espana 

From Andrea 


I'm a faithful follower of your mag. and 
very happy with the fascinating stuff you 
publish every issue. My question is, would 
you be interested in starting a Web 
Designer magazine totally in Spanish? I'm 
based in Barcelona. I'm a web and graphic 


designer and here there aren't any 
magazines with the fabulous content that 
your mag has! 

So hope that you like the idea enough to 
start a project. Cheers! 

There are international versions of Web 
Designer including Italian and Dutch, 
but unfortunately no Spanish at the 
moment. You never know, now could be 
the time to become an international 
magazine licensee and bring Web 
Designer to Spain. 


subject Free digital version 

From Josh Savage 

Just would like to say your magazine is 
awesome! But is there any chance - as I 
already pay for the print version - that I 
can get the digital version free? 

Glad you love the magazine, but 
buttering us up with compliments won’t 
get you a free digital version. You will 
still need to buy both, but it is something 
we will consider for the future. 


Comments from the Blog 




Web Designer is always keen to hear from its readers, followers and visitors. Here we bring 
together a specially selected collection from the last month 




@create_oblivion 
new issue of 
@WebDesignerMag 
just landed through 
my door time for 
some light afternoon 
reading #webdesign 

@SteveMshanahan 
@WebDesignerMag 
or subscribe and you 
would have got it 
through your 
letterbox yesterday 
like me:-) 




@mikcowans 

@WebDesignerMag 
Dolphin browser (cl. 
ly/HfHC) is excellent, 
but my personal 
preference has to 
be Sky fire 

@patsybrady 
@WebDesignerMag 
+1 for the developer 
section in the mag. 
Do you think this 
could become a 
magazine on its 
own? #hint #webdev 




@ChadStrat 

@WebDesignerMag - love to see more @Concrete5 
articles! It’s solid CMS, give it some love! 


Web Designer posed the question Twitter or Facebook? Here’s 
a couple of readers thoughts. 



@designerliams 
@WebDesignerMag 
Twitter hands down 
for its ease of use and 
simplicity. But use 
Facebook more often 
due to its popularity... 




@hatchpb 
@WebDesignerMag 
Twitter, definitely. I 
think Facebook is 
way too 
cumbersome & 
time consuming 



HOW COULD TWO COFFEES 
TRANSFORM YOUR BUSINESS? 

They can't, but we can for the same price. 

Switch to Blacknight Business email for the 
cost of a couple of coffees. 



To find out more, visit www.blacknight.com 


A BLHCKMGHT 

SOLUTIONS 


















Jason is vice president of product 
management, community, and 
evangelism at Infragistics, a Microsoft 
.NET MVP, on the INETA Speakers 
Bureau, and the author of 
multiple books on various 
.NET technologies, the 
latest being Silverlight 
4 Professional. 


Jason Beres 


Are HTML5 media resources all we have been told to expect? 


D o the media features in HTML5 live up to their hype? Like 
many things new and shiny, the hype-cycle for HTML5 is 
pretty strong. The reason is, the big three heavyweights 
in technology - Microsoft, Apple and Google, have all put their 
support for HTML5 front and centre in their product strategy. Any 
new product seems to have an HTML5 twist, especially browsers. 
For instance, who has the most HTML5 compliant browser? You 
can find articles all over the web with a blow-by-blow feature 
comparison of IE vs Chrome vs Safari - all with varying results. 

The answer is not so simple. Asking whether browser support for 
HTML5 media has lived up to the hype is not a simple yes or no 
answer. One might argue that the only hype is coming from the 
media, or Microsoft, Apple and Google. Does the consumer actually 
care whether they are watching a video that is HTM L5 or not? Based 
on global Internet traffic trends, about ten per cent of connections to 
the Internet are happening from a mobile device. In some counties, 
like India, that number is almost 50 per cent and growing. As most 
mobile devices require a plug-in-free media experience, HTML5 is 
the simplest and most consistent delivery mechanism. Even though 
one could argue that globally ten per cent isn’t a huge number, 
which means having HTML5 media delivery isn’t critical, though 
regionally it does matter. So if I am in a country like India where I do 
half or more of my Internet browsing via a mobile device, I expect it 
to work seamlessly with my lifestyle. 

Eventually, we will all enjoy HTML5 media. Unlike a decision on a 
phone or tablet OS, where the consumer is in charge, the fate of 
HTML5 media is really dependent on how many browsers actually 
support it and how quickly vendors drive you to these modern 
browsers. Around 65 per cent of browsers that hit the Internet today 
support HTML5 media. In a year or perhaps three years, this should 
be in the 90 per cent range. It’s just a matter of time. So the questions 
become: How many new devices will ship with modern browsers? 
How many legacy browsers will be updated to a modern version, 
and how many legacy browsers will go out of support, thus forcing 
users to upgrade? The ubiquity of HTML5 media depends on the 
answers to these questions. 


Mobile devices need HTML5. Due to lack of plug-in support on 
mobile devices, all roads for media on devices lead to an HTML5 or 
device-native solution. The HTML5 solution is important when 
browsing the Web on a mobile device, if you go to cnn.com, bbc. 
com or ESPN.com you want to see the videos. Since the iPad does 
not support plug-ins, you’ll expect these sites to play media in an 
HTML5 player. For video that requires DRM (Digital Rights 
Management), perhaps a native solution is better, as most devices 
have a native video player, which can validate DRM. 

There is risk in using HTML5 media today. Even though it’s good that 
around 65 per cent of browsers today are HTML5 capable, it may 
not be good enough. Consider these points: 

Plug-ins are almost everywhere - Flash is pretty much 
everywhere in every browser and Silverlight is installed on 
about 75 per cent of browsers 

Not all browsers agree on how to play HTML5 media - different 
browsers support different codecs, so you need to support 
multiple encodings of your media 

HTML5 video can’t do fullscreen mode, which is desirable for 
content providers like NetFlix & Hulu. 

It does seem risky to dump plug-in media delivery for HTML5. 
Perhaps it’s too early, since the current solutions work pretty well. 

Final thoughts: considering all of the issues and considerations 
around HTML5 media, it is fair to say that HTML5 media has lived up 
to its hype in some aspects, whereas in others it has not. Plug-ins still 
deliver a consistent, secure, DRM-protected experience on most 
browsers. HTML5 can deliver a good experience on 65 per cent of 
browsers today, and is supported on almost all mobile devices, but 
the consistency isn’t quite there yet as a single solution. For now, a 
hybrid approach is still needed if you want to get into the HTML5 
media game. As time goes on, and the percentage of modern 
browsers that are compatible with HTML5 gets higher, you can 
expect to see HTML5 as the only solution on sites that don’t have a 
DRM requirement. 


14 


header 
















Pay As You Go 
Advertising 

Advertise on Google. 

Pay only when people click on your ad. 


For most types of advertising, you pay for people to see your ad. With Google AdWords advertising you 
only pay when they click to visit your website. So you get exactly what you pay for - more customers. 
And because this is pay-as-you-go advertising, you have complete control. 





Control how much you spend 

You can set a daily spending limit and an amount you're happy to pay for people to click 
on your ad. The price is chosen by you, not us, so you never have to worry about going 
over your budget. 

Control who sees your ad 

Your ad will only appear when potential customers are searching online for relevant 
terms you've chosen to describe your business. 

Control where and when they see it 

You can choose to target your audience by location and time: attract local customers 
during your opening hours or, if you'd rather, promote yourself to a global audience 
round the clock. 


Voucher missing? 


Don't worry, someone in your company may 
have beaten you to it. Track them down and 
make sure they're claiming 




£50.00* free advertising credit 

with Google AdWords for your business. 


No minimum term or commitment. 


Offer only available to businesses in the UK. 


Don't miss out - try it today 

We're offering £50.00* free Google AdWords 
advertising credit for business users**. There's 
no obligation to continue - you're in control. 

To start attracting new customers today: 



Visit google.co.uk/ads/start 


Or call 0800 169 0478*** 


***Calls to 0800 numbers are free from BT landlines but charges may apply if you use another phone company, call from your mobile phone 
or call from abroad. 

**Terms and conditions apply. Promotional credit can only be used for AdWords accounts that are less than 14 days old by advertisers with 
a billing address in the UK. Advertisers will be charged for advertising that exceeds the promotional credit. Advertisers will need to suspend 
their ads if they do not wish to receive additional charges beyond the free credit amount. Offer subject to ad approval, valid registration and 
acceptance of the Google AdWords Programme standard terms and conditions. The promotional credit is non-transferable and may not be 
sold or bartered. In some cases, advertisers who choose prepay billing may be subject to a £10 minimum prepayment before their account is 
activated. Any such prepay amount will be credited to Advertiser's account once account is activated. One promotional credit per customer. 
For full terms and conditions please visit http://www.google.co.uk/adwords-voucherterms. Google Ireland Limited, a company incorporated 
under the laws of Ireland, with company registration number 368047 and registered office address at Gordon House, Barrow Street, Dublin 4, 
Ireland. Copyright 2012. Google and Google AdWords are trademarks of Google Inc. and are registered in the US and other countries. 


Google 
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Filling the 



Patrick Algrim is a product designer 
who has been building for the web 
for more than 12 years. With two 
previous successful companies, 
Patrick plans to share his 
knowledge and love for 
design in the ever- 
evolving web world. 
patrickalgrim.me 



Patrick Algrim 




Conceptualising world-changing webapps and measuring their needs 


O n the web today nearly everything we see is a software 
application. With the modernisation of Ruby on Rails, 
it’s easier than ever to get started. Don’t hesitate, 
purchase a Ruby on Rails book and spend a weekend reading. You’ll 
be building sooner than ever. I suggest Rails for Zombies, which puts 
lessons and video into an online experience (railsforzombies.com). 

But what makes a really amazing webapp? Are we just designing 
an interface for tables in a database or are we building a tool to 
capture an audience? The answer is both. Designers have a gift - our 
perception of the world is very different. This gift is drastically under 
-utilised inside non-creative work environments. 

What does the world need? That’s the question that should 
always be on your mind. Arbitrarily look at technology as pieces of 
data stored in databases. It’s truly that simple of an abstraction. It’s 
what you do with them that is going to make great things. 

Don’t feel foolish, ask questions to people you can't relate to. The 
two biggest demographics that don’t get utilised are teens (8 to 16) 
and women (28 to 48). Usually the builders of these software 
applications are men aged 20 to 35. It’s much easier to build for 
ourselves. But if you look at the world of software, there are plenty of 
tools available for this group of people. Either save consumers time 
or make them happy. Those are the two types of products that 
dominate the internet at the moment. 

If you have children, ask them what they want to see in the world. 
Go to their school and look at the tools they’re using. Ask their 
teachers what tools they require. Look at your wife’s lifestyle if you 
have one. Does she carry fifteen credit cards? Build something small 
and ask questions right away. If it’s useful without being a beautiful 
interface it will be even more useful when it is. 

The best part about building solo or with a friend is that you’re 
able to build something experimental. You don’t have employees to 
generate revenue for. You don’t have a public offering to uphold. You 
are completely free. Build something that doesn’t make sense. The 
worst that could happen is that you learn something new. 

Build quick and measure quicker - you don’t need complicated 
tools to do so. If you’re building for a demographic, put the product 


in front of them. Look at how they subconsciously interact with the 
product. Often they’ll mention a piece of friction that they believe is 
a problem, but if you’re watching them closely you can quickly learn 
what aspect caused the confusion. Speaking purely on interface 
these friction problems can often reside one or two steps previous 
to where the consumer might mention the friction came from. 

Put early prototypes in front of non-technical consumers. Use 
children, parents or grandparents. Watch reactions of a prototype 
more so than the perfectionism. Apply their feedback to prove out 
future ideas or help invent new ones. 

Once your application has gone through its iterations and you 
feel strongly about the problem it’s solving, self-promote. Don’t 
worry, great products will continue to grow organically after your 
first self-promotion. Offer it free to your child’s school, email people 
you admire online to ask for their feedback, submit the product to 
contests and technology news sources. 

Have you ever heard the expression ‘it only takes one person to 
change the world’? Its true when it comes to the gratifying nature of 
the things you’ve built. Once you’ve launched your application and a 
small number of people are using it, ask more questions. The stories 
your customers share will be more gratifying than money 

Big companies rarely speak about the money they’re making as 
the most amazing thing they’ve achieved, but they do often speak 
about stories their customers have shared. Did someone find their 
wife using your product? Did it help them save a life? Ask them. 
Spend the time crafting personal emails to people you don’t know. 
They’ll gladly share all. Avoid making newsletters or creating forms 
to receive this feedback. The less personal the approach, the less 
likely someone may be to sharing a personal story. 

Last of all, remember that nearly every large app started in this 
way. Facebook, Twitter and countless others built solutions to solve 
problems for themselves or people they wanted to relate to. 

Try using Intercom App (intercom.lo) to communicate with users 
one-to-one. Be personal when communicating with customers. 
Don’t be discouraged quickly, for every one hundred emails sent, 
only one will be returned. 


Your customers’ stories are more gratifying than money 
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Call 0808 231 4381 now to get started! Or visit www.webfusion.co.uk/partner 

•Quoted prices are subject to change and are exclusive of VAT. Terms and conditions apply. 


webfusion 

Mxi. The wsb. Connected. 


High performance hardware, 
reliable infrastructure and 
expert support, what more 
could you want? 

How about 15% commission? fwftl 


At Webfusion we don’t just offer reliable and robust hosting products, 
we also give you the opportunity to earn commission by referring our 
products and services to your colleagues or business associates by 
joining our Partner Programme. 


V Earn 15% commission 
</ No limit to what you can earn 

Not points based, earn money for your referrals 
</ Increase your revenue with little effort 


Here is an example of what you could earn 

Product 


Level 4 dedicated server (managed) 
Level 2 dedicated server (self-managed) 
Virtual Private Server developer 


£7559.76pa 

£1727.88pa 

£680.28pa 


Total commisskr £1495.19 
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This issue UX is in the limelight with two books covering both 
ends of the scale: first, learn to design the ultimate user 
experience, then how to quantify viewing statistics. Android 
developers get a helping hand with 200 of the most 
successful techniques, while creatives can find some great 
tips on producing and promoting content for a blog. 


QUANTIFYING THE 
USER EXPERIENCE 

£30.99/$49.95 

mkp.com 

Q User experience is about 

providing an appealing website 
that will engage users and ensure 
they keep coming back for more. This 
book looks at how the right decisions 
can be implemented using statistics. 
Quantifying The User Experience is a 
practical guide on how to solve 
frequent problems and goes out of its 
way to answer common questions (for 
example, how long does it take a user 
to purchase a product?) The book is 
divided into ten chapters, with each 
providing a host of examples and 
tables to reinforce its message. If you 
need to find out how to get the most 
out of statistical data for a better user 
experience, start here. 


SMASHING UX DESIGN 

£27.99/$44.99 

www.wiley.com 

Q Smashing Magazine is much 
loved among web creatives, 
and this addition to its burgeoning 
book collection is yet another great 
resource. Smashing UX Design is 
divided into four parts, across 33 
chapters. It is a great guide for those 
looking to embrace UX design across 
the whole spectrum. The book kicks 
off with UX processes, before tackling 
research and evaluation techniques, 
design tools and, finally, UX 
components deconstructed. Within 
each section are myriad chapters that 
look at usability testing, prototyping, 
wireframing, sketching, information 
architecture and planning, along with a 
bevy of case studies and checklists 
that help get the job done. 


ANDROID COOKBOOK 

£42.50/$54.99 

oreilly.com 

O Android Cookbook is a 

collection of tried-and-tested 
‘recipes’ - 200 in all. The book offers 
solutions for a whole host of essential 
developer projects. Discover how to 
work with Uls, multitouch gestures, 
location awareness, web services and 
device features such as the camera 
and accelerometer. In addition to 
providing directions for feature-rich 
apps, readers will also find the steps 
needed to package up an app for the 
Google Play store. The recipes are 
conveniently divided into chapters like 
Designing a Successful Application, 
Testing, Graphics, GUI, Telephone 
Applications and Location and Map 
Applications, to name but a few. 




BLOGGING FOR CREATIVES 

£12.99 

www.ilex-press.com 

Q Blogs populate the web in their 
thousands - if not millions - and 
getting the attention of users is the 
primary objective. Blogging for 
creatives offers over 190 pages of 
guidance. Newcomers and enthusiasts 
will get loads of tips that start right at 
the beginning of the process and 
gently walk the reader through all they 
need to know to succeed at blogging. 
Beyond the basics, this compact book 
offers a guide on setting up for 
WordPress and Tumblr. When ready to 
go, there’s advice on creating great 
content, promoting a blog, being social 
with Facebook and Twitter, plus how to 
monitor performance. Essentially this 
is a complete guide to blogging. 




BOOKMARKS 
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Hydro74 is an artist that is hard 
to ignore. His style is cool, 
contemporary and loved by 
many, including us at Web 
Designer. The ‘Screw you, pay 
me’ T-shirt boasts a tagline that 
many in the freelance 
community will empathise with: 
‘Freelance isn’t free’. There’s a 
limited print run on this tee so 
be sure to get yours soon! 
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ONLY because we can 


onlybecausewecan.com 

Development technologies HTML5, CSS, Flash 


Q 

North Kingdom 



Designer UndeGrey/ North Kingdom 

www.northkingdom.se/unclegrey.dk 

An interactive live-action film offers high 
levels of customer participation to 
deliver a new brand experience 


••••••••••••• 


••••••• 


onceived by creative 
agency UndeGrey, The 
Liberation offers ONLY 
aficionados a new way to 
view the brand’s latest 
range. After loading, the 
film immediately starts 
and draws the viewer 
into its narrative. As 
NorthKingdom and 
UndeGrey point out, the 
film was always intended be interactive. 

"When we started on the project, we 
agreed that the focus should be on the 
experience and not the technology - 
it's an interactive video with added 
functionalities - an experience people 
would be dragged into. 

The linear approach to the 
storytelling is juxtaposed with the 


interactive and commercial elements 
that allow the viewer to click on any 
garment to learn more about it. 
These can be bookmarked for later 
reference to ensure the flow of the film 
isn’t interrupted. 

As the designers explain: “All brand- 
specific garments are tracked 
throughout the film. When the film is 
paused, little plus symbols appear on 
top of each garment. If you click on any 
of these you’re presented with a slide-in 
side-panel where you can interact and 
bookmark garments for later reference 
- nothing to take you out of the story.” 

Few brands understand how 
powerful video can be, and even fewer 
have the creativity that UndeGrey and 
North Kingdom bring to this imaginative 
and engaging campaign for ONLY. 


We agreed that the focus should 
be on the experience and not the 
technology - it’s an interactive video 
with added functionalities §§ 


CLICK ON 

™ VIDE 

TO GET A CLOSER 

THE CIO' 



<Above> 

• Starting immediately, the film offers a complete 
narrative that showcase ONLY’s collection via an 
interactive interface 


abcABC 1234567890 



<Above, top to l>ottom> 

• URW typewriter from URW++ is the successor of 
the company URW (Unternehmensberatung 
Rubow Weber) and is available from FontShop 

• The font used by ONLY is an original hand-drawn 
bespoke typeface that was created especially for 
the company 
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<Top left, cloclcwise> 

• The film contains hotspots. When a 
viewer wants to know more about a 
garment, they click for more info 

• When a hotspot within the movie is 
activated, the film is paused and 
product details relative to the shot 
are revealed to the viewer 

• At anytime when watching the film 
the viewer can jump straight to the 
ONLY online store by simply clicking 
on the ONLY logo when it appears 

• Small additional interactive 
components have also been included. 
These are intended to draw the 
viewer’s attention and complement 
the product information 


<Below> 

• The film may be showcasing ONLY products, 
but the technical achievement of melding video 
with interactive elements is a masterstroke 




#68828E #404C52 #FFFFFF 



#AA9984 #90A1AE #060C14 
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Know a site that deserves to grace these pages? Tweet us now 0 @webdesignermag 


Indesit Annual Report 

annualreport11.indesitcompany.com 

Development technologies HTML5, CSS3, CSS animations, CSS transitions, 

HTML5 video, jQuery, Modernizr 



Designer Gclia. 

gaia.is.it 


The annual report for Indesit uses the form 
of an infographic coupled with some 
cutting-edge web technologies 


he annual report for 
Indesit reveals that the 
web today is an inventive 
environment. Gaia was 
asked to showcase the 
company’s main 

achievements, yet move 
away from the traditional 
means of delivering this 
kind of information. 

Gianluca Centulani, 
chief business development officer at 
agency Gaia explained how they 
approached the project: "The key tool 
was Knockout.js, which we used to 
populate the timeline. It was perfect for 
creating a replica of the timeline in the 
right column, as it meant we just had to 
loop over the data twice using a 
different template. Then once that was 
set up all we had to do was add or 
remove data from the ViewModel and 
the Ul was automatically updated; great 
for the filters too." 


Adopting the now familiar vertical 
scroll technique, as each set of statistics 
appears they all have subtle animations 
that bring what could easily have been 
drab figures to life. Viewers can also 
interact with the graphics to see more 
detailed information. 

What strikes you about the site is the 
use of well-chosen colours as well as 
the imaginative use of animations that 
never overpower the viewer. The static 
information on the left of the screen 
anchors the overall design, leaving the 
viewer free to absorb the information 
and highlight the statistics they are 
most interested in. 

Overall, this site’s design shows in 
abundance how even the most 
mundane information can be 
presented in an interesting way when 
great ideas are involved. Information 
can be engaging, and in the hands of 
designers like Gaia, information can 
also be beautiful as well. 


I Information can be engaging, and in the 
hands of designers like Gaia, information 
can also be beautiful as well IMP 


<Above> 

• The infographic approach to the Indesit annual 
report is subtly augmented with animations 


02. financial 
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SERVICES 
J0*.7 

COOLING 
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WASHING 
1179.1 

COOKING 
S6S.S 


<Above> 

• Rolling a mouse pointer over each graphic 
changes its focus to reveal more detailed 
information. Complementary colours give a 
corporate sense to the images 
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<Above> 

• The site uses Myriad Pro. Developed by 
Robert Slimbach and Carol Twombly, the font 
it available from the Adobe Type foundry 


<Top left, clockwiso 

• Most of the graphics in the report are interactive. Users can roll 
over each statistic to reveal more information 

• Click on some area of the report and you are taken to new 
pages with more in-depth analysis, all tied together with the 
same colour and typeface theme 

• Indesit’s development is also not forgotten. A slider timeline 
reveals graphics and videos about the company’s products, all 
nicely integrated into the page design 

• Learn more about the people behind the brand on the 
management page. Gaia use subtle background textures to give 
the page a corporate feel 
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Know a site that deserves to grace these pages? Tweet us now Q @webdesignermag 




EVOENERGY 



THE INTERACTIVE 


U.K. ENERGY 

CONSUMPTION 


In 2010, total UK ovaralt primary energy consumption In 
primary energy terms (Le. fuels obtained directly from 
natural sources) was 218.5 million tonnes of oD 
equivalent. 3 per cent higher than In 2009. However. It 
should be noted that In 2009 UK primary energy 
consumption was at Its lowest level In the last 20 years 
as a result of the downturn in the economy. 


to - 


Primary, you say? 




<2\bove> 

• The design of the site gives the viewer control 
over how much or little information they see, 
which aids understanding 



#FEB7CC #448F72 #53C679 



#CC9901 #4D3D3E #FFFFFF 



<Top left, <:loc:l<wise> 

• The animations used throughout the 
site bring what could have been dry 
graphics to life 

• Using specifically chosen colour 
combinations gives each panel their 
own individual identity as the user 
scrolls down 

• The designers understand how to 
clearly communicate information, 
such as how fuel usage has changed 
overtime 

• The concluding page of this site 
brings together the design 
components and technical elements 
into one impressive graphic 
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<Above> 

• A masterclass in current infographic design, 
complementary colours and animation come 
together on this site 


duaec am,m 

obeABC1234567890 

< Above, top to bottoin> 

• The Only Exception is designed by Kimberley 
Geswein and is available from Dafont 

• Londrina is designed by Marcelo Magalhaes and 
is available from FontSquirrel and Typekit 


EvoEnergy 
UK Energy Guide 

www.evoenergy.co.uk/uk-energy-guide 

Development technologies HTML, CSS, JQuery, CSS3, Fontface, Typekit 



Designer Bryan James 

Front-end developer Dave Sellers 

www.purepleasuredesign.com 


Using a graphical style, the designers have ensured 
that the information presented is bold and visual 



hen energy use is usually 
considered, the beauty that 
can be brought to this 

- 

information often gets lost. No 
so with this site from 
EvoEnergy. Epiphany Solutions 
have used their considerable 

••••• 

design prowess on this site 
resulting in a stunning use of 
colour, typography and subtle 
interactive elements. 

Says Bryan James, lead designer on the 
project: “Were all so used to seeing energy 
data surrounded by bleak images and serious 
tones and we wanted to do something very 
different for Evo. We designed the way users 
interact with it to continue the interactive tone, 
it's a nice engaging piece and the user gets a 


series of rewards as they scroll down the page, 
including a transition from dusk to dawn. The 
whole thing is driven by our desire to bring 
information to life in an interesting and 
shareable way.” 

The vertical scroll of the site reveals more 
graphics, with each one using a different 
method to communicate its message to the 
reader. The smooth transitions from section- 
to-section are equally matched by the perfect 
use of rollovers to change the data set on view. 

Energy usage is not a fun subject but in the 
hands of these designers the infographic 
presents to the visitor pages of information 
they want to read and absorb. The playful 
approach coupled with a flawless technical 
execution of the site delivers an experience 
that more than meets its brief. 


•f The whole thing is driven by our 
desire to bring information to life in 
an interesting and shareable way •• 
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success and drove us » « 


A complex and exciting project, 
with a host of big brands needed to 
be brought together to provide an 
equal balance between the main 
elements and the user experience 

Johnny Michaelsen: “From the get-go, we could see 
that working with so many members of Google, agency 
teams, and input from the four huge brands featured in 
Project Re: Brief would require great focus and ambition, 
which Fi has plenty of. Our strategic and flexible 
approach that the team will describe in detail set us up 
for success and drove us through a fantastic and 
celebrated launch.” 

Yuwei Fu: “When approaching the user experience 
design, we thought the process of creation, showcasing 
the Google technologies used, and celebrating the final 
results, were equally important. To deliver the best Re: 
Brief experience, we created equal balances between 
these three main elements. Moreover, the new ads were 
designed across different devices and platforms such as 
desktop browsers, mobile apps and tablet apps, so we 
had the opportunity to adapt our designs. 

“Because of the complexity of the project, we began 
with several whiteboard sessions with Google and 
partner teams to fully understand the dynamic content 
of new ads and really nail down and finalise the 
wireframes before moving to design.” 

Simone Magurno: “The first steps of the project 
consisted of absorbing and understanding the overall 
goals of the campaign: bringing re-imagined iconic ads 
to life as if they were concepted today on the web, in a 
way that makes sense to viewers. Most importantly, we 
also needed to comprehend how those goals could be 
tied to specific Google products (Display Ad 
Technology, YouTube, etc). This initial phase helped 
steer our thinking in the right direction.” 
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fl CctoromQ 

The concept for the project was discovery, empowering the users 
to take control of the online experience and gradually revealing more 
as they progressed through the site 


Fu: “Through Project Re-. Brief, Google 
focused on four campaigns from the world-famous 
brands, Coca Cola, Volvo, Alka-Seltzer and Avis. To 
easily navigate through the different brand pages, 
we designed an always-present brand menu on the 
bottom of the site. From there, each brand page 
starts with an overview of the original ads, a tour of 
the new ads and an explanation of how Google 
technologies brought each new ad to life. The long 
scrolling page helps the user to understand the 
Re- Brief process and the range of Google products 
through a narrative experience. The section menu 
on the left indicates the flow and links down to each 
section of the page for a user who may have 
already been through the journey before and is 
looking for something specific. 

“One of our early ideas was to use a Google Map 
engine and build a giant canvas that included the 
four brands. Each brand would be located on a 
different part of the canvas. The user could zoom in 
to see more detailed content for each brand, and 
move the canvas to browse the other brands. But in 
the end, we stuck with the flexible narrative 
structure, in order to really let the content shine and 
allow for easy content updates.” 

Magurno: “The first conceptual draft of design 
was very much centred around the idea of 

discovery: we 
believe that 
empowering the 
users to take 
control and 
responsibility for 
their actions, 


unveiling more and more content as they dig 
deeper into the experience allows our messages to 
resign with them in a much more successful way. If 
you look at the site today, you'll see where some of 
this thinking is still present. 

“In this perspective, we started sketching designs 
that would present the new ads as a result of a 
number of additional layers of thoughts, design 
and technology. 

“Following this metaphor, the user was enabled 
to discover what went in each one of the new ads 
by peeling the layers off one-by-one-. unveiling more 
details for each one of the stages as he or she was 
diving further into the campaign. 

“We did a number of design sketches around the 
idea of progressive disclosure, and defined a series 
of interaction patterns that would allow the user to 
seamlessly dig deeper into the experience and 
increase their awareness. 

“After working in this direction for a while, we 
realised that given the scale and complexity of this 
project, layering content on top of each other was 
not necessarily the most efficient way of 
communicating our story. At this point, we decided 
to spread out the content in a more linear fashion, 
offering the user a more streamlined storytelling 
and a stronger contextual awareness, which you 
see on the site today in the form of a scrolling 
format. As Yuwei alluded to, the long scroll takes the 
user on a journey from the past (original ad and 
concept) to the present, where we have showcased 
the re-imagined ad, and then they were finally taken 
through an explanation of how Google’s latest 
technologies were used.” 
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The Google App engine 
provided the framework 
for the project, ensuring 
a scalable and easy to 

deploy and maintain 
environment 



Hedstrom: The site uses Google App 
Engine and the built-in webapp application 
framework. It made it quick to set up the 
development environment easy to deploy 
and maintain, and was able to scale with 
traffic. We saw spikes in traffic but the site 
handled it gracefully. Coca-Cola posted a link 
to Project Re.- Brief on their Facebook page, 
driving lots of users to the site, but thanks to 
the automatic scaling of App Engine we saw 
no negative effect on performance. The site 
doesn’t use a CMS so there's no need for a 
datastore, but it’s using quite a few 
templates with hooks for device specific 
content - tablet users gets slightly different 
content from desktop visitors. We use a 
Python middleware script to determine the 
users device and serve up the appropriate 
content, and webapp for routing requests, 
but the majority of the site is HTML5. CSS3 

anrl ti_• , 




J ~' "-r u aii-e n i iviLb, ( 
and JavaScript. The videos are hosted 

Ym iTi iho --. , 


, K u 11 ic viueus are nosted on 
YouTube, so we created a custom YouTube 
player in ActionScript, which communicate' 


player in ActionScript, which communicates 
with JavaScript via Externa I Interface calls.” 
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DURATION 




Chris Rubin: “With so many moving parts - branded 
individual campaigns, the campaign as a whole, and the 
documentary film created about the project itself - and a 
huge number of variables related to each component, we 
decided on a phased rollout to meet the challenge. 

“Phase one was focused on two of the four partners 
involved in the ad campaign portion of the project: Coke and 
Volvo. The phase one launch was coordinated with a New 
York Times article and an official Google-led presentation/ 
unveiling at SXSW 2012. The site, ads and campaign as a 
whole all got tons of positive attention and coverage. Soon 
thereafter, we rolled out phase two, which focused on the 
remaining two brands: Alka-Seltzer and Avis. This launch was 
supported by an email blast to those who expressed interest 
in site updates. Traffic got a nice bump from this initiative, 
leading us into the penultimate rollout - phase three - which 
focused on the upcoming release of the documentary film 
portion of the project, debuting at Cannes in June, 2012. 

“In the end. this initiative for Google was all about 
educating their potential ad-buying audience on the nearly 
infinite possibilities afforded by modern technology in the 
display ad marketplace. Mission accomplished.” 
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Visit elatt.ac.uk for full course details. 
Call 020 7275 6750 for info/guidance, 
and to secure your place now. 


Skill-up! 


TRAINING TO ENHANCE 
YOUR PROSPECTS AND 
EARNING POWER! 

Cover more, quickly 
with motivating training 
from industry experts 
at London’s Web and 
Graphic Design Academy, 
and increase your career 
prospects and earning 
potential. 


• Receive hands-on skills on 
comprehensive short, evening 
courses 

• Choose from beginner to advanced 
levels in HTML, Dreamweaver, 
Drupal, Photoshop, Flash and more 

• Achieve recognised Adobe Certified 
Associate (ACA) certification 

• Train in our specialist facilities 
in London’s digital tech hotspot, 
Shoreditch’s Kingsland Road 


Career Seekers/Hobbyists 

• Gain a unique range of enjoyable 
career options 

• Think free-lance work/self- 
employment/creative agency work 
and more 

Industry Creatives 

• Up or cross-skill to speed career 
progression 

• Take advantage of more work 
opportunities and maximise 
earning potential 


260 - 264 Kingsland Road, London, E8 4DG 
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Lost Boys 
International 

This issue Web Designer travels to Copenhagen to 
talk to the Danish wing of digital masters LBi. It 
describes itself as a new breed of agency that 
looks to grow wise but never grow up 

LBi 

who LBi Denmark wliat Digital marketing agency blending insight 
creativity and technology where LBi, Vermundsgade 40A, 2100 
Copenhagen web www.lbidenmark.com 


Key Clients 

Maersk, Rezidor Hotel 
Group, IKEA, Etihad 
Airways, Nike 


Bi Denmark is a new breed of agency 
blending insight, creativity and 
technology to create business value 
for brands. It works with all types of 
companies, from famous brands to 

. disruptive startups. What unifies its 

clients is that they are brave, bold and 

••••••••a 

::::::::: ambitious. LBi has helped these clients 

.. connect with their customers by 

delivering engaging and measurable 
ideas across owned, earned and paid media. 

In this digital age, the consumer expects to engage 
with content, tools and functionality that make the 
brand proposition real, relevant and believable. LBi 
Denmark helps define the strategy for their clients’ 
digital presence and identifies how to engage users 
and finally they create the digital solutions. 

This is no easy task, and it takes a special culture 
and skillset to get it right. LBi calls this blending, and 
it's a practice that is central to pretty much everything 
it does. LBi claims to be best in class at blending 
strategy, creativity and technology across a range of 
channels including social media, mobile. CRM, 
content, search and experience architecture. Its 
blended teams give LBi a unique ability to define, 
create, distribute and measure its clients’ services, 
content, behaviour and communications. 


LBi Denmark is a creative collective of over 70 
doers, thinkers and dreamers. It has a strong digital 
DNA that dates back to the pioneering digital agency 
Networkers founded in 1997. LBi's international 
network consists of over 1,800 people in 26 offices 
worldwide, which gives the company unique access 
to a pool of insight and expertise, and the ability to 
work across borders on internally scoped projects. 

LBi’s roots go back as far as 1997. Marketing and 
communications manager Sofie Andreasen offers up 
a brief insight into how the agency has evolved and 
developed since those early days: "In the international 
LBi group we base our full service claim on our 
heritage, which lies in the pioneering early years of 
digital communications. Lost Boys. IconMediaLab, 
Framfab, Oyster, Wheel, Syrup and Special Ops in New 
York, and Bigmouth Media, have blended their areas 
of expertise to create a new breed of agency 
In Denmark specifically, our legacy dates back to the 
pioneering digital agency Networkers, which was 
founded in 1997. In 1998 Networkers became part of 
Framtidsfabriken, renamed in 1999 to Framfab. In 
2006 Framfab became part of LBi. In 2010 LBi 
Copenhagen merged with TRIPLE Copenhagen. We 
are still located in the same industrial factory on 
Vermundsgade, and quite a few of us have been part 
of the entire journey. 
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The content 


Internationally we are LBi Denmark - denoting our 
global network and with reference to our local base. In 
Denmark we are just called LBi.” 

The name LBi is inherited from the international 
network that LBi Denmark belongs to. Andreasen 
reveals the story behind the name and the importance 
of its associated URL. “The name LBi, which we have 
inherited from our international network - is originally 
an acronym for Lost Boys international. The name 
was inspired by the dream of growing wise, but never 
growing up, of chasing tomorrow while making the 
most of today. But sometimes, when we want to 
appear super grown-up and sensible, the company is 
just LBi. It’s like putting on a business suit over a set of 
Superman pyjamas. LBi group has the URL 
www.lbi.com, and from here users can access all 
local agencies’ individual websites, plus they can find 
us directly or through search engines on 
www.lbidenmark.dk and www.lbidenmark.com.” 

The LBi Denmark web presence is regarded as a 
functional ‘business card', by the agency itself. 
Andreasen explains the core purpose of LBi's online 


presence and reveals that a new website is imminent. 
“We believe the website is a quite important part of 
LBi’s online presence. We mostly regard it as a 
functional ‘business card’, though. Potential clients 
can scan it for a quick overview of what we do to see 
if we are relevant to their business challenges. The 
same goes for potential job candidates, who can get a 
sense of what we do and who we are. We do not 
believe however, that we attract new business as such 
through our website only. The site is a testament to 
our existence. However, new client relations find us 
through the work we deliver, the prizes we win, 
referrals and of course when we approach them. In a 
way the core of our product is our people, so the basis 
for any new client relation would involve meeting us. 
We will launch a new website this summer, which ties 
in more closely with the global LBi presence and the 
other local offices. And the content on our coming 
site will be more dynamic." 

Working with big clients such as Maersk, Carlsberg 
and Nike helps enhance the agency’s reputation. 
Director of sales Lars 0rum Andersen explains the 


•• New clients find us through the work 
we deliver, prizes we win, and referrals 



KEY PROJECT 


We Are Maersk 
wearemaersk.com 

Maersk recently launched the new 
corporate movie We Are Maersk, 
directed by internationally 
acclaimed director Christoffer 
Boe. LBi’s brief was to leverage the 
digital potential of the film. 

LBi created wearemaersk.com, 
a digital storytelling platform that 
supports Maersk’s corporate 
website and showcases the 
recently launched We Are Maersk 
movie through an engaging, 
compelling and personalised 
digital experience. LBi’s aim with 
the site was to create a universe 
that resonates a modern-day 
corporate brochure with dynamic 
and customised content. 

The site offers navigation by 
means of a world map that shows 
Maersk’s presence and activities 
around the world. Through this 
map, the user can shuffle between 
11 sequential movies, each 
featuring some additional 
background articles and 
geographical information. 

The content is distributed in an 
interactive multi-layer via 
infographics, FAQs, animations 
and images, and is customised 
through IP-detection in order to 
increase relevance for a diverse 
global audience. The site is 
designed to both encourage and 
ensure a level of audience 
engagement and interactivity. 

Applying a business-to- 
consumer means of 
communication to business-to- 
business messaging is setting a 
new direction for communication 
in the shipping industry. 
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Bettina Sherain 

managing director 


who’s who 


Jonas Bechlund 

vice managing director 


Lars Cortsen 

creative director 


Christina Fahrenholz 

director of search 
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Networkers becomes 
part of Framtidsfabriken, 
which is renamed in 
1999 to Framfab. 


The agency win their first 
Cyber Lions Grand Prix in 
Cannes for Nikefootball.com. 


The agency signs 
Nike Europe as a 
client as a result of 


LBi gets Danske 
Bank - Denmark’s 
biggest bank-on 
the client list. 
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Number of 
employees 


Number of 
employees 


Studio timeline 

Established 1997 

Founders Tim Frank Andersen, Martin 
Lindstrom, Claus Feuchter and Peter Schmidt 


The pioneering digital agency I 
Networkers is established by Tim I 
Frank Andersen and Martin I 
Lindstrom, with BBDO as investor. \ 


philosophy of attracting new clients. “Having the 
opportunity to work with ambitious clients like 
Maersk, Carlsberg, and IKEA with both the power and 
the will to pursue new interesting ground is crucial for 
us when it comes to attracting new clients. It helps us 
to get on the right pitch lists and it opens doors to 
companies with whom we want to partner. 

“For us, validating new potential clients is not a 
matter of industry - it is all about sharing the belief 
that results in digital marketing are obtained through 
a truly integrated approach, embracing both strategy, 
creative and media. A client like Maersk is all that.” 

With a big reputation behind them, LBi can run the 
gamut of who they wish to work with. Andersen 
reveals how they get to pursue the clients with whom 
they want to build a relationship. “We do not get to 
pick and choose who we work with, but we get to 
choose who we want to pursue actively and who we 


want to pitch for. We are privileged to have been 
approved for a number of pitch lists, and we consider 
each pitch carefully. We prefer to work as advisors to 
the global organisation of internationally oriented 
companies, as we have vast experience with building 
global digital media presence as well as with global 
versus local digital content strategies. We do not 
discriminate projects based on size, but whether we 
can see a potential for delivering across our full 
service palette over time, as this is where we believe 
we can deliver the most value to our clients.” 

Frandsen talks projects, and divulges how there is 
rarely repetition and how it is difficult to define a 


typical project timeline. “Somehow, even though we 
have been in this industry for a very long time, no two 
projects seem to be the same. It is difficult to define a 
typical timeline because often these are defined by 
our client’s situation and challenges. For instance with 
Maersk we have run three digital platform projects 
and none of them have been the same. The site 
wearemaersk.com grew out of a corporate movie 
project and we had very little time to do it. Hence, we 
had to pick ourselves up and run that much faster and 
work that much smarter. And despite what it could 
sound like, it does not actually affect quality. Often a 
range of constraints and critical factors can ignite 


•§ With a big reputation... LBi can run the 
gamut of who they wish to work with ft 
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liidttesilile places Uial requiie highly 
specialised drilling rigs and skill sets. 
Maersk works with universities and 
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in most oil fields between 6080% of 
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Maersk oil holds more than 35 patents 




The agency starts working with IKEA on 
the global sales and marketing 
programme IKEA BUSINESS, targeted 
towards small business owners 
worldwide. It now runs in 24 markets. 


i The agency 
puts Etihad 
Airways on 
the client list. 


LBi Copenhagen 
merges with TRIPLE 
Copenhagen and 
becomes TRIPLE LBi. 


Framfab becomes part of LBi. The 
agency produces the viral movie 
Ronaldinho Crossbar, which 
spreads impressively by the 
millions worldwide. 


The agency wins their 
third Cyber Lions 
Grand Prix in Cannes 

for Nikefootball.com. 


TRIPLE LBi changes its name to LBi 
Denmark. In 2011 it launched www. 
maerskfleet.com - the first tangible 
result of adding Maersk to the 
client list in 2010. 


■ , -• 


The agency is 
appointed digital 
agency of record 
for Carlsberg 
globally. 


creativity and fast thinking, and ultimately create an 
even cooler solution than something that has been 
processed for months and reviewed and revisited 
endlessly. When there is no time for politics, there is 
room for magic. We are quite proud of wearemaersk. 
com - a content-heavy site, which was designed and 
produced in less than two months. So far the site 
has won several awards and we hope for more 
throughout the year.” 

Project creation tools are key to a build. Director of 
client services Jesper Andersen, reveals that the 
agency uses a variety of tools including their own 
bespoke platform. "We use a variety of tools to suit the 
various needs in our respective competency areas. 
From a client service and delivery management 
perspective we use tools such as OmniPlan, MSP, 
JIRA, GreenHopper, Maconomy, but we have also 
developed bespoke tools and templates to optimise 


project steering and communication between client, 
project manager and team. For reporting we tend to 
use the tools our clients want us to use, but our own 
LBi dashboard is a preferred platform for executive 
reporting on KPIs. 

Besides that we use various productivity tools in 
our competencies. Obviously our technology 
department are specialised in the some of the best 
content management systems on the market, but 
they also use open-source wikis - apart from 
development tools that could be Java or MS based. 

“Our UX department often uses Axure for their 
wireframes, but depending on the task those could 
also be done directly as a prototype in HTML. Macs 
and applications from Adobe Creative Suite are the 
primary tools of the creative department, but our 
creative team still also do a lot of the rough work first 
using pen and paper." 



industry 

insight 


— 

Rasmus Frandsen 
Creative Director 


« We believe in the 
impossible. We constantly 
test the boundaries of 
media and technology to 
find the right solution 99 
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HOTEL MISSONI 


Cuciacuncapl 

I ike the great Italian family kitchen, 

Cucina is the heart and soul of the hotel. 

A happy collaboration between the design 
sensibility of Rosita Missoni and the 
internationally renowned chef Giorgio 
I ocatelli, of I ocandal onatelli 


Cucina is an expression of the simple joys, 
the exuberance of Italian food, Italian 
dining, the Italian way of life. 
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Often we 
will work to 
improve, 
enhance, and 
elaborate on 
the solutions 
we create and 
in doing so, 
we work very 
closely with 
our clients 


MINUTES 


Berlin, de 


Pari*. fir 



The completion of a project is not the end of LBi’s 
involvement. Andersen explains the project processes 
that LBi adopts. “Often large international projects are 
sold in stages or with a pilot to begin with. This means 
that we rarely deliver a project wash our hands and 
move on. Often we will work to improve, enhance, and 
elaborate on the solutions we create, and in doing so, 
we work very closely with our clients. We do not think 
in ‘post launch services’ - instead we strive to link 
projects in an overall strategic journey for our clients 
helping them drive their business forward - and 
managed services is one step in that journey.” 

HTML5 and CSS3 will shape the web over the next 
few years. Head of creative technology Dennis Green- 
Lieber gives his thoughts on new technologies and 
how frameworks will add flexibility to the build 
process. “In the past two years we have witnessed a 
new web revolution - the industry has moved 
extremely progressively on new technologies. HTML5 
and CSS3 have pushed browser vendors to find a 
common standard, which means we will have a more 
unified way of working without being dependent on 
popular plug-ins such as Flash. Instead we will rely on 
the internal native capabilities of the browsers like 
CSS3, hardware-accelerated animation and, WebGL. 


“The future points to multi-devices, cross-platform 
and open web. Open sourced and community driving 
frameworks like jQuery, zepto.js or Backbone.js will be 
important players due to the fast development of the 
technologies and feature sets. We believe they will 
evolve in to small bits and parts that we can combine 
with our projects, so each framework will excel within 
a small field - creating a welcome flexibility.” 

Mobile is a key component of the web experience. 
Green-Lieber, reveals how LBi looks to responsive 
design, if it is the right solution for the selected project 
"Mobile is going to be a very essential platform for our 
clients in the future and will organically be a part of 
our work. In all our new development projects we 
follow a native responsive web strategy with a mobile- 
first approach. We build from content and design 
strategy to make sure that the experience is 
brand-consistent on all platforms. In many cases we 
also work with a progressive enhancement strategy 
so the user’s feature set will ingress depending on 
device platform. 

“So, yes, we are in favour of responsive web when 
possible. There are some constraints; for instance, 
when we work with large international clients, who 
have running platforms with a lot of development 


•• The industry has moved extremely 
progressively on new technologies §# 


history. In these types of projects responsive web is 
not always the right solution. 

“In these instances, the alternative is to make 
separate templates for mobile using user-agent 
detection. Within that mobile template we use 
responsive web features and strategy to have fluid 
adaption grid for mobile and tablet devices.” 

LBi social media strategist Gus Murray gives a brief 
insight into how important Twitter, Facebook and 
social media is to a digital campaign. “Social media 
plays a huge part of a brand’s digital campaign. Users 
are typically looking to have one of their five need 
states (entertainment, reward, recognition, utility and 
information) delivered by a brand. Brands that 
understand these need states have the ability 
drive traffic to a site, piece of content or other branded 
web property.” 

To ensure that LBi stays ahead of the game it looks 
to employ the right people. COO Lotte Ronan reveals 
that talent, ambition and the right attitude are the key 
attributes to succeed. “We look for people with talent 
and ambition - most often with a track record from 
within the industry, but they can also join us from 
other industries if they have the right attitude. First 
and foremost we look for people that are hands-on 
and content creators within their area, as we work in 
an area where attention to detail is key. Strategy 
comes out of understanding your target group, trying 
something out, testing it, learning and re-doing it - 
and this is the hands-on attitude we are after.” 
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Clean and simple 

Uncluttered, clean and simple layouts can make a blog a thing of beauty. Here we 



Loghificio 

www.loghificio.com/eng/blog.php 

Development platform HTML, CSS, JavaScript 

Loghificio is a responsive blog that uses a simple 
two-column layout with plenty of space that lets the 
content breathe. A subtle background texture creates a 
background canvas that helps define the content. 
There is little in the way of text, but a neat sans serif 
font adds legibility while the images take centre stage 
and add a subtle charm that engages the reader. 


Needs/Wants 

needswants.com 

Development platform Word Press 

Needs/Wants is the epitome of clean and simple. The 
background is a popular all-white and intersperses 
this with a two-tone colour scheme that adds style. 
Text and typography is a mixture of serif and sans 
serif, and is a simple but effectively used design 
stance that gives presence. The fixed sidebar is 
another feature that adds style and substance. 


Scribble Tone 

scribbletone.com 

Development platform HTML, CSS, jQuery 

This centrally-placed ‘skinny' blog uses a logo, a few 
words and a grid of well-matched images to present itself 
to the world. The design is clean, engaging and creates 
enough intrigue to encourage the reader to investigate 
further. The image grid is more than just a pretty selection 
of images, it is also the gateway to more crisp and 
clean posts. 
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Clean and simple blogs | 


seenmSggesI Tweet a 140 with your blog’s address directly to %■ @WebDesignerMag 
a theme Email your suggestions to ft webdesigner@imagme-publisliing.co.uk 

pick six of the best blogs that stick with an unassuming and understated presence 




Features 


The back to top button Is a subtle 
unnamed arrow that sits adjacent 
L to the Features title. This moves j 
L into the navigation bar as A 
page scrolls up 
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## The ONLY logo reverses the black text/ 
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white background to give it emphasis if 


Archer Group 

www.archer-group.com 

Development platform Word Press 

The Archer Group site is clean and simple, but uses 
images and animations to engage readers. The 
background is a single repeating image that adds 
texture and depth. A big featured graphic takes 
centre stage, but it’s the individual post images that 
give the blog its character. The variation in image 
size is neat and completes the picture. 


Only 

www.onlynylives.com/news 

Development platform HTML, CSS, jQuery 

Clean and simple and black and white perfectly describes 
the ONLY website, which makes good use of two colours. 
The logo reserves the black text/white background to give 
it emphasis in its position. The three-column grid adds a 
splash of colour and links to the graphically rich posts. A 
neat touch is the dynamic logo background that is active 
when waiting for the next page to load. 


The Post Family 

thepostfamily.com 

Development platform HTML, CSS, JavaScript 

At first glance The Post Family is a simple two- 
column text and image blog. However, further 
investigation reveals some subtle touches. The 
back-to-top button, rollover images switching from 
greyscale to colour, and use of typography help 
create an admirable scenario. The emergence of new 
posts at the bottom keeps the visitor engaged. 
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BUILD FUTURE-PROOF 
HTML5 WEBSITES NOW 



T here’s been much reported about HTML5 since the launch 
of the iPhone in 2007, but here we are, over five years later, 
still waiting for some of the headline features to be 
implemented by browser vendors. This protracted roll-out 
has led to many web designers effectively choosing to 
ignore the opportunities HTML5 offers, insisting that they will be 
adding to their workload by supporting an emerging standard 
that’s not yet universal. 

While it’s true that not every visitor to your website will be using 
a browser that’s fully HTML5 capable (and in fact, compared to the 
full specification, none of them will be using a browser that 
supports every feature) there’s a lot you really can use today 
without causing yourself any additional work. By embracing 
HTML5 you’ll be future-proofing your design to ensure it’s ready for 
the next generation of browsers. 

Across the next six pages we’re going to look at the HTML5 
features you can use to enhance your site today; how you can 
leverage HTML5 to create next-generation websites that make use 
of hardware acceleration, geolocation technology, embedded 
audio and video, and built-in user input controls. 

HTML5 gives us the opportunity to create amazing new 
interactive experiences for our visitors, develop smarter 
applications, and more refined user interfaces. As the technologies 
mature, and browser support improves across the board, more 
designers and developers are seizing on the opportunity to find 
new paradigms, and build entire business models on the back of 
them. By treating HTML5-specific elements as a progressive 
enhancement, it’s possible to avoid excluding users who haven’t 
got the most modern browser, while simultaneously providing 
something special to those that do. 

It’s a truly exciting time to be a web designer, so why wait to 
implement HTML5 when we can do so much with it today? 



SEMANTICS AND STRUCTURE 

It’s certainly not the most exciting part of HTML5, but one of the biggest new features 
- and one that's fully ready to be used regardless of your visitor's browser - are the 
new semantic tags and structure that form a part of the HTML5 specification. It’s not 
glamorous, but semantics is a big thing for lots of reasons: better search engine 
optimisation, more accessible content, easier-to-understand structure and improved 
maintainability to mention but a few. Let’s start by defining semantic markup. 

WHAT EXACTLY DOES SEMANTIC MARKUP MEAN? 

Put simply, semantics is the study of language meaning. In HTML the language 
meaning relates to the tags we use to mark-up our content. For example, an <li> tag 
means the enclosed content is an item within a list, or a <p> tag means that the 
marked-up content is a paragraph. As such, marking up semantically is nothing more 
than using tags that accurately describe the type of content. 

WHAT’S CHANGED WITH HTML5? 

One of the issues with HTML since it's earliest adoption by designers (rather than the 
scientists who designed it), is that it has suffered from a limited number of tags, and 
as such some tags - especially the <div> tag in particular - have had to fulfil many 
different tasks. As designers we tend to use a <div> tag to mark-up our navigation 
menus, a second for a sidebar, a third for our page header, and so on. We identify 
each of these areas by using a class or id on the <div>, but these names are 
arbitrary and vary from designer-to-designer according to their personal preference 
or schooling. 

Additionally, some tags have been hijacked to fulfil purposes other than their 
originally intended use. The best example of this is the humble table tag that, for a 
decade or so, was used as the primary layout tool of designers. The table tag was 
intended to hold tabular data, but designers quickly realised that sliced graphics could 
be set inside a table to create layouts that simply weren't possible pre-CSS. The result 
was a mess of nonsensical code that was difficult to maintain, and bore no relation to 
the content it was marking up. 

While we’re past the <table> issue, thanks to the <div> tag and CSS, HTML5 aims to 
address the wider problem of nondescript markup by providing semantic tags, just like 
the <p> for paragraph, oriented towards the most commonly used content 
characteristics of a webpage. So in HTML5, rather than create a header by using the 
code <div id=”header”>...</div>, you can now use the semantic <header> tag. Similarly, 
tags have been introduced for <footer>, <aside>, <article>, <section> and <nav>. 
Together these tags offer an enhanced method for describing the content they 
contain, in a consistent and universal manner. 

WHY DOES THIS MATTER? 

From a search engine optimisation point of view, having universal tags that describe 
content is a big plus; using these tags helps the search spiders to determine the most 
important content on your page, and index accordingly. In effect you’re providing a 
better set of signposts to your content, which the search engines will happily lap up. 

It's not just about machines though! Using a semantic approach to your code also 
helps enormously with screen-readers, allowing disabled visitors who rely on 
specialist software to navigate and consume content on the web to get to your 
content more easily and consistently. By adopting the new tags, you’re potentially 
opening up your website to a huge demographic of visitors who might have been 
disadvantaged by a nest of <div> tags in the past. 

HOW DO I USE IT? 

You can start using the new tags immediately without any ill effects on older 
browsers, by using a script such as HTML5Shiv to force older browsers to understand 
the new elements. The benefits are invisible to the naked eye, but you’ll be ensuring 
your site isn’t left behind as the next generation of browsers is introduced. 
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BUILD FUTURE-PROOF HTML5 WEBSITES NOW 


HTML5 FORMS 

Over the past 15 years, forms on the web haven’t 
changed much at all. User controls have improved as 
developers and designers learned how to use 
JavaScript to provide placeholder text and guided user 
input, but essentially we’re still using the same core 
input mechanisms as we always have: text, checkbox, 
radio, select and textarea. 

One of the challenges associated with designing web 
forms is helping the user to complete the form 
correctly. Dates have to be checked to ensure they’re in 
the correct format, email addresses 
need to be validated, and so on. Each time a form is 
deployed, therefore, we’re compelled to use client or 
server-side validation (or often both), writing our own 
routines to provide a date picker, validate input and 
provide placeholder text to point the visitor in the right 
direction. It’s a lot of work, duplicated time and time 
again, and requires additional download of assets such 
as JavaScript files every time your page is rendered. 

WHAT’S NEW WITH HTML5? 

HTML5 goes a long way towards solving this problem 
with the introduction of new input types, support for 
placeholder text, and crucially browser-native user 
controls and input validation. The new options use the 
same core tag that you’re already familiar with, <input>, 
but add content-specific features. Examples include 
the email input, number, tel, date and url. Crucially, 
because <input> remains the primary tag, older 
browsers will simply ignore the new type declarations 
and fall back to type=”text”, allowing these 
enhancements to degrade gracefully. 

As well as the new input types, there are some 
wholly new tags that offer different kinds of 
functionality. The <datalist> element, for example, is 
used to provide a predefined list of options for an 
<input> element. This provides the type of functionality 
you can see on Google, where it auto-completes your 
search terms, based on the letters you first start typing. 
Unfortunately, the new tags aren’t yet sufficiently 
supported to be usable without quite a bit of additional 
work, but luckily for us, the enhanced <input> options 
are ready to go today! 

HOW DO I USE THEM? 

The syntax for the new input options is the same as 
what you’ll already be familiar with. Rather than use the 
code <input type=”text” name=”emaH” /> you can now 
use <input type=”email” name=”email” />. In addition, 
there are some new attributes and CSS pseudo-classes 
that allow you to make the most of native browser 
controls and validation. The required attribute will tell an 
HTML5-ready browser to validate and require a field, 
while the CSS Jnvalid pseudo-class allows styling to be 
used to provide visual feedback to the user without the 
need for any external scripting at all. Elsewhere, the 
placeholder attribute allows you to specify some 
example content that demonstrates the type of input 


BUILD A SMARTER FORM 

Take advantage of HTML5 to reduce the 
amount of code you write, and enhance the 
visitor’s experience 


Rfl 


Add the elements 


Create a normal form as you would in any 
HTML page, but instead of using <input type=”text” 
/> choose type=”email” where the input field is 
designed to collect an email address. Add the 
required=”required” attribute to make the field insist 
on a valid response. 



0 Target with CSS 

Add a CSS pseudo-class rule to target 
invalidly completed fields. This might colour the 
border of the field red, or use CSS transitions and 
animations to make the field appear larger, pulse or 
shake to draw attention to itself. Keep in mind that 
any required fields start off as invalid though! 


001 input:invalid { 

1002 border: 2px solid red; 
003 } 


Add placeholders 

You can add signposts to the user to 
demonstrate what kind of content you’d like to be 
input by using the placeholder attribute. This allows 
you to pass in sample content or specific 
instructions to be displayed within the input 
element. The text will disappear automatically once 
the user starts completing the field. 



HTML5 forms allow you to 
provide an enhanced user 
experience without 
any scripting 
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Get focus easily 

Using JavaScript to set 
focus on an element 
when the page loads is 
I unnecessary with HTML5 
- use the autofocus 
I attribute on the field 
you’d like to be pre- | 
I selected. Focus is now 
[. more accessible and 
Li can be turned off by 
disabled users. 


you’re expecting from your user. This will typically 
render as light grey text inside the form field which 
disappears once the field gains focus on the page. 

WHAT ABOUT OLDER BROWSERS? 

Older browsers will simply fall back to treating each of 
the new types as a standard text field, and will totally 
ignore any attributes they don’t recognise. This means 
that for the time being you’ll still need to provide your 
own validation, but by adopting the new types now 
you’re ensuring you’re ready for the future where we 
won’t need script to validate form submissions. 

Canvas was originally introduced by Apple in 2004 as 
an internal rendering solution for graphics in WebKit. It 

<CANVAS> 

was adopted by additional browser vendors in 2006, 
and subsequently became part of the HTML5 
specification, at the behest of the W3C. 

WHAT DOES IT DO? 

The <canvas> tag creates a region on your page that 
can be drawn to dynamically using script. This allows 
for the generation of procedural graphics such as 
charts and vector-originated artwork, as well as 
interactive applications such as drawing or animation. 
The system works much like many other two- 
dimensional drawing APIs, providing a series of 
methods with which you can paint rectangles, circles, 
lines and text. 
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Clear up after 
yourself 

To create an animation 
with the <canvas> tag, 
you need to clean up the 
existing drawing on the | 
canvas before drawing I 
your next frame. Call I 
the clearRect command: I 
context.clearRect I 
(x , y , w , h ). k 
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<canvas> can be 
used to create 
interactive panels 
that rival Adobe 
Flash for visual 
panache while 

being entirely 
HTML and 
JavaScript-based 


WHAT BENEFITS DOES IT OFFER? 

As the web becomes more refined in both 
development and design, users rightly expect to be 
able to do more with it. This might mean displaying an 
interactive chart that responds to user input, such as a 
mortgage repayment calculator, or an online image 
editing app. In the past, both such applications would 
have required a third-party plug-in such as Flash to 
process and render the graphical aspects of these 
requirements. With the arrival of <canvas> these tasks 
can be rendered natively in the browser, making for a 
more accessible and easier-to-maintain solution. 

The typical scenario where you might choose to use 
<canvas> is where a visual representation of data can’t 
be created ahead of time - if you're dealing with 
something like live stock exchange data, for example. 
<canvas> offers the ideal solution to render a line chart 
that reflects the current and historical prices for a 
specific stock or index. As the image is created using 
script at the time the page is rendered, the graphic will 
always be up-to-date and correspond with your latest 
data feed. 


HOW DO I GET STARTED WITH <CANVAS>? 

The canvas API offers numerous methods to do this, 
including the ability to render bitmap graphics from 
external files. At its simplest, however, adding a canvas 
to your page is as straightforward as including a 
<canvas> tag in your HTML: 


001 <canvas id=”mycanvas” width=”400” 
002 height=”400”> 


Amazing results are 
possible with canvas, 
especially when it comes to 
animations-as this particle 
system from spielzeugz.de 
demonstrates 


001 </canvas> 


Drawing a shape is achieved using JavaScript: 

001 var mycanvas = document.getElementB 

002 yld(‘mycanvas’); 

003 var context = mycanvas. 

004 getContext(‘2d’); 

005 context.fillStyle = ‘blue’; 

006 context.fillRect(50, 50, 150, 150); 


The code above creates a programmatic link to the 
canvas element, and draws a blue rectangle inside it. 


HOW WIDELY IS -CANVAS- SUPPORTED? 

All the major browsers now support <canvas>, apart 
from Internet Explorer 8 and earlier. As a result, it’s 
becoming increasingly possible to deploy canvas 
artwork on your website, without having to worry too 
much about any fallback for users with regards to the 
content or design of your site. As Flash increasingly 
takes a back seat in modern website development, the 


WHAT ELSE CAN IT DO? 

As it's a procedurally drawn system. <canvas> can be 
used to create animations that interact with user input. 
This makes it an ideal solution to creating games. It can 
also be used as a solution for rendering alpha channels 
in video content, or even rendering non-supported 
video formats in the browser - potentially allowing a 
single format to be displayed in every browser 
regardless of the nominated formats for video. 


WHERE CAN I SEE EXAMPLES? 

The web is full of examples of canvas in use. A good 
place to start is www.html5canvastutorials.com. which 
provides a full set of tutorials and examples 
demonstrating interactive canvas graphics, utilising 
shadow properties, SVG Paths, and functionality such as 
drag and drop. 


If your browser does not support canvas, this message 
is shown instead: 


<canvas> tag will become the standards-based 
replacement that allows designers to continue to offer 
sophisticated and rich user interfaces that go beyond 
what CSS alone can achieve. Because it’s universally 
supported in the current generation of browsers, it's a 
fantastic way to create lightweight interactive images. 











BUILD FUTURE-PROOF HTML5 WEBSITES NOW 


AUDIO & VIDEO 


Over the past decade, video on the web has exploded. 
As bandwidth has increased, and more people have 
access to high-speed internet connections, the likes of 
YouTube and Vimeo have gripped the imagination of 
web users across the globe. Until HTML5, the most 
reliable and common method for including video on a 
webpage was to render it using Adobe Flash. Both 
YouTube and Vimeo continue to use this approach by 
default, but both sites have started migrating over to 
the more accessible and standards-friendly HTML5 
version as the browser vendors have updated their 
software to support the all-new <video> tag. The same 
revolution is also happening for <audio>, and both are 
fast becoming the de facto method for presenting rich 
media content in a way that’s compatible with all 
devices, including smartphones. 


More recently, other vendors have followed Apple’s 
lead, and dropped support for Flash from their mobile 
devices. While this has acted as a catalyst for change, 
the HTML5 specification has long proposed native 
video and audio in the browser, as a part of its aim to 
reduce the amount of code and work required to 
deploy common media types to the web. As with the 
other HTML5 enhancements, direct embedding offers 
numerous accessibility benefits, and search engine 
indexing improvements over Flash. 


WHY FIX IT IF IT ISN'T BROKEN? 

When Steve Jobs stood up and announced that the 
iPhone wouldn’t support Adobe Flash, the web sat up 
and took notice. Where 99 per cent of web-connected 
devices had previously supported Flash, now an 
ever-growing number of devices didn’t. Fortunately, 
Apple took this decision knowing that the primary 
usage scenario for Flash - presentation of video - was 
adequately covered by HTML5. Their argument was 
that Flash was in fact broken; it was the cause of the 
majority of browser crashes, didn’t translate well at all to 
touch-based hardware, and was bloated, memory- 
hungry and a massive drain on the battery life of 
mobile devices. 
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HOW DO I USE IT? 

Usage is simple: use a <video> tag to embed video, and 
an <audio> tag to embed audio, and nest within the tag 
links to the different formats in which you’ve encoded 
your media. Ideally there would be a single accepted 
format for video on the web. Unfortunately there are 
currently two competing standards - H.264 and WebM 
- and several more for audio. 

In order to use only HTML5 to render video in 
practice, you currently need to encode your video and 
audio into multiple formats and link to each format 
within the <video> and <audio> tags, ensure every 
HTML5-capable browser will be able to render your 
media. However, as many desktops continue to use 
older browsers that don’t support HTML5, it’s also safe 
to use H.264 encoded video only, and provide Flash as 
a fallback for those that don’t support H.264 files. 

Both new tags allow for fallback content, which 
makes it a simple process to upgrade your existing 
Flash-embed code to make use of HTML5 without 
excluding older browsers and with no direct need for 
browser sniffing scripts. 




GEOLOCATION 



One of the most exciting and challenging changes to 
the web has come about with the proliferation of smart 
mobile devices, phones and tablets in the past few 
years. Where it used to the be the case that web access 
meant being tied to a desk, increasingly it's just as likely 
that your website will be viewed on a mobile device as 
a traditional computer. 

This change in usage and consumption heralds a 
huge opportunity to redefine how we present content; 
it prompts us to consider the user and their 
requirements in ways we’ve never needed to before. 
Nowhere is this more significant than in the growing 
market for location-aware applications, where content is 
specifically oriented towards both the user and their 
current position. These apps take advantage of a 
hardware enhancement common to most 
modern smartphones running software from 
Apple, Google and Microsoft - the GPS chip. The 
opportunities this innovation offers aren’t limited 
to native apps, however; HTML5 offers us the 


GET YOUR LOCATION 


Create a script that grabs the location of 
the visitor using the geolocation API and a 
small amount of JavaScript. 


Access the API 

'ou can access the geolocation API using the 
syntax navigator.geolocation. This sets up a request 
for the user’s location, and will provide a browser 
prompt to grant permission if this is the first such 
request of the visitor’s session on your site. The first 
argument passed into the function is the name of a 
success function to handle the geolocation data. 


001 navigator.geolocation.getCurrentP 
osition(showposition); 
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Provide a fallback 

Don’t assume that users 
will grant their permission 
for your page to access 
their location. If the user 
rejects the request, make 
sure you have a second 
function set up to handle I 
the rejection in a graceful I 
way and without 
significantly limiting your I 
page’s functionality. I 


ability to query the user's location and tailor our web 
content accordingly. 

HOW DOES IT WORK? 

The geolocation element of HTML5 is made available 
through an API, accessible with JavaScript. The location 
isn’t dependant upon the device accessing the page 
having a GPS chip, so any HTML5-capable browser with 
support for the geolocation API will attempt to locate 
the visitor using available means (including known Wi-Fi 
networks, Bluetooth, RFID etc). The user has to explicitly 
choose to share their location through the API before 
any results are returned to the browser, so typically a 
user will see a pop-up inviting them to consent to 
sharing their location with your website. This is handled 
entirely by the browser itself. 

HOW DO I USE IT? 

The current batch of smartphones and tablet devices 
are typically running HTML5-engineered browsers, so 
are the most common devices able to use this 
functionality. By a happy coincidence, they're also the 
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Deal with the data 

Once your user’s location has been made 
available, the success function will be called. You can 
now access the location as a set of co-ordinates based 
on latitude and longitude. These are returned as 
floating numbers with many decimal places, so 
consider using parselnt to simplify the results if you’re 
planning to show the data back to the user. 

1001 function showposition(position) { 

»4002 // this function is called when 
Ithe location has been determined 
1003 alert(“You are located at latitude 
Imposition . coords. latitude*” 
land longitude “+position.coords. 
Ilongitude); 

1004} 


Geolocation allows you to provide context-sensitive information 
to your site visitors easily 


devices that benefit the most from the opportunities 
this feature offers. You can request the user’s location 
with a few simple lines of JavaScript code. 

Of course, getting the user’s location in latitude and 
longitude is only half the job - the data is only useful if 
you do something with it. Typical scenarios might 
include presenting a customised map that shows the 
location of the nearest public convenience, or a tailored 
set of driving instructions to your office location. More 
creative options might include a location-aware game, 
interactive story or social media feed. 

Translating a user’s location into something 
meaningful is made easier with the likes of OpenLayers, 
OpenStreetMap, Bing Maps or Google Maps, and each 
of these offers an API allowing you to pass in a location 
expressed in latitude and longitude. Alternatively, if 
you’re comfortable with maths, it’s quite possible to 
model the globe yourself using basic trigonometry and 
calculate distances and angles between points using 
JavaScript alone. This can offer up some amazing 
possibilities for collaborative websites that enable 
people to meet, interact or compete against each other. 
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Integrate with a third party 

Now you’ve got access to the user’s location, 
it’s simple to integrate with a third-party service or 
API. This can be as simple as centring a map on the 
user’s location, or as complicated as using 
OpenLayers to create a customised map that shows 
distances to points of interest. 


FIXING JAVASCRIPT 

As we create increasingly complex web 
applications using HTML, JavaScript and 
CSS, a fundamental issue associated with 
JavaScript is rearing its head 


As well as the headline features of HTML5, 
there are a lot of additional enhancements that 
have the potential to make a big difference to 
the web experience. Many of these deal with 
overcoming some of the limitations of the web 
as it stands, and one in particular aims to deal 
with a fundamental bottleneck common to 
all browsers. 

JavaScript is the universal client-side scripting 
language on the web, but it suffers from being 
single-threaded. What this means, in lay terms, is 
that JavaScript can only do one thing at a time. 
This can cause complex web apps to become 
unresponsive while the script that makes them 
run churns through instructions. 

HTML5 introduces the concept of web 
workers - the ability to spawn background 
scripting threads in your web application. The 
basic concept is that instead of running 
resource-intensive scripts in your main script 
loop, you can spawn a background process that 
runs independently of the user interface, 
preventing slowdown and making your 
application feel more responsive. A clever 
system of message passing allows your main 
script to interact with web workers, allowing you 
to use all the potential of JavaScript, without 
suffering the performance hit traditionally seen 
with computationally intensive code. 
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Create animations for HTML5 Canvas in Flash CS6 



lash has had something of 
a hard time of late. The 

ever-increasing rise of 
tablets and smartphones - 
and the distinct lack of 
Flash on webpages for 
those devices - has caused 
Flash to fall from its once 
lofty heights. Rich 
animations that have 

previously been possible in Flash have been pretty hard 
for a mere mortal to achieve in HTML5 Canvas. Adobe 
has bounced back with the help of Grant Skinner, who has 
developed the CreateJS framework. This is a modular 
framework for working with the Canvas element and it 
makes it much easier to get rich content. With Adobe CS6, 
Flash can use a special panel to export your animation 
straight to Canvas. It won’t export all Flash interactivity, 
but it puts Flash back firmly on the map as the animation 
tool for the web, and all interactivity can be added in 
JavaScript once exported. 


Create 
animations 
forHTML5 
Canvas in 
Flash CS6 

Want rich animated content on an iPad 
webpage? Flash CS6 can now publish 
to a friendly HTML5 format making 
your workflow much easier 




tools I tecli I trends Flash CS6, Toolkit for CreateJS, Dreamweaver 
expert Mark Shufflebottom 


CreateJS makes it much 
easier to get rich content 



Installing the software 

In order to complete this tutorial you will need a 
version of Flash CS6 (www.adobe.com/downloads); click 
Flash CS6 professional to download and then install. You 
will also need the CreateJS plug-in available from www. 
adobe.com/go/downloadcreatejs. Double-click to install 
- provided you've installed the new Flash CS6 first. Now 
copy the Start folder from the CD over to your desktop. 



Start Flash 

Go ahead and start Flash CS6, and open 
‘mini-monster-start.FLA’ from the Start folder. Click on 
the monster on the screen and add the instance name 
of ‘monster’ in the Properties panel. This will be 
important when we add interactivity later. Now 
double-click the monster to open the movie clip. 
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Create animations for HTML5 Canvas in Flash CS6 



Add frame labels 

^ Create a new layer and name it labels'. Select 
frame 1 and add the frame label ‘idle’ in the Properties 
panel. Select frame 5 and press F6 to add a keyframe, 
then add the label ‘roaring’. If you look at the timeline you 
will see the idle pose is complete but the roaring needs 
work. Select frame 5 of the body layer and hit F6. 



Adding the body 

Select the body and select the Free Transform 
tool. Hold down Alt and drag up on the top handle to 
about 110%. Alt keeps the bottom in place and just 
extends the top edge up. Select frame 70 of the body 
layer and press F5 to extend the timeline. Select frame 
70 of the frontfoot layer and hit F5 to extend that layer. 
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Placing the head 

Select frame 5 of the head layer and press F7 to 
add a blank keyframe. From the library, grab the symbol 
head2 and drag it onto the stage. Place it on top of the 
body symbol. Now select frame 70 and press F5 to 
extend the timeline. You can play the timeline to see the 
monster’s head growling. 



Explore the roar 

" Double-click the head2 symbol on 
the stage and drag the playhead along. As 
you can see it is just the mouth tweened 
open and shut with appropriate keyframes. 
It’s important when creating animation for 
export using the CreateJS toolkit, that you 
use the classic tween inside Flash, 
otherwise you will get problems. 
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Rotate the arm 


Under the timeline, click on the 
monster symbol to return back to that. 
Select frame 5 of the uppermost arms 
layer and hit F6. Using the Free Transform 
tool, rotate the arm as shown in the 
screenshot so that it mirrors the other arm 
on the monster. Now select frame 6 and 
press F6 again to add another keyframe. 


A 


Smaller 
file size 

When you export, 
choose Hosted Libs for a 
smaller file size. These 
are cached in the 
browser from different 
sites that use the 
libraries, so they make 
the files load quicker. 



Make it wave 

Now rotate the arm to mirror the other arm 
again. Select frame 10 and press F6 and rotate the arm 
until it matches the other arm. Select frame 6, Shift+click 
frame 10 and then Alt-drag this along the timeline to 
copy these keyframes. Keep doing this until you’ve got 
the same frames as the other arm layer. 


Add a tween 

Click any frame between 5 and 10 then Shift+click 
any frame between 55 and 60. Right-click on the frames 
and choose Create Classic Tween from the drop menu. 
Now select frame 70 of this layer and press F5 to extend 
the timeline. If you play the animation now you should 
have two arms waving in a very ‘scary’ manner. 


Corrupt content 



Grouping graphics, and placing them 
inside a graphic symbol or movie clip, 
though useful, usually results in content 
not showing correctly. 



02 _Tweenception 

Tweened symbols, nested inside other 
tweened symbols are another no-no. This 
results in content missing from the export; 
but frame-by-frame animation will work. 



03 _Moved rotation 

Each symbol’s rotation point is the white 
spot inside it. You can pick this up and 
move it, but sometimes this has adverse 
effects on the output from Flash. 
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Create animations for HTML5 Canvas in Flash CS6 


It’s all in the eyes 

If you double-click on the eyes symbol you will 
notice that it has its own timeline. At the end of this are 
a couple of keyframes with some blinks. Because this is 
not tweened it will play okay. If you nest tweened 
symbols inside tweened symbols, it causes problems. 
Return back to the monster symbol now. 


First export 

It’s time to try our first export. Go to Window>Other 
Panels>Toolkit for CreateJS. In the panel, hit the Publish button. You will 
get a preview in the browser and it should look pretty much like it 
would in Flash, but it’s running native in HTML5. There is no sound at 
the moment, so go to File>lmport>lmport to Library and choose roar. 
mp3 from the start folder. 





The exported files 


When you output your files using the 
Toolkit for CreateJS, you will notice 
that several files are generated, which 
might seem quite confusing. You 
obviously get an HTML page, which 
contains your HTML5 Canvas 
element that the animation is 
contained within. There is a folder 
created called libs, which contains all 
the functionality libraries needed. 
This consists of Easel JS, MovieClip, 
PreloadJS, SoundJS and Tween JS. 
These are modular libraries of code 
that give the same functionality to 
Canvas that you will find in Flash, 
such as the ability to preload content, 
play sounds and tween. The other 
folder is for sounds, and we have to 
manually add sounds to this folder as 
in the tutorial. The final file is the 
JavaScript file that contains all your 
graphical data and animation. This is 
named the same as your exported 
HTML file. 



Add the sound 

Add a new layer and name it ‘sound’, then add a keyframe to 
frame 5. In the properties add roar.mp3 as the sound from the drop 
menu. Now export again. You will notice the roar still doesn’t play, 
which is a bit of a pain. CreateJS has created a folder named sounds, 
but it’s empty. Drag roar.mp3 into this and refresh the browser; it 
should play ok now. 


Build the scenery 

Return to Flash and click the Scene 1 icon under 
the timeline to return to the main stage. Select the floor 
layer and draw a rectangle for the ground, then hover 
your mouse over the top edge until a small curved line 
appears next to the cursor. Click and drag to bend the 
top edge into hills. 




A mountain to climb 

Select the hills layer on the timeline, and from 
the library add the mountain symbol. Copy and paste 
this a couple of times so we have a small mountain 
range. Use the Free Transform tool to resize the 
mountains so that they’re not all the same - be as 
random as you want with this. 




Adding code 

You can add simple timeline 
control into projects that are 
to be exported to CreateJS, 
like stopping the timeline 
and playing a frame label. 
Not much else can be 
added in Flash 


Liai;r 


Head in the clouds 

Select the background layer and, 
from the library, drag the cloud symbol onto 
the stage. Copy and paste the cloud so you 
have three copies of it placed randomly 
around the sky. As in the previous step, use 
the Free Transform tool to resize the clouds 
so that they look a little different. 
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Create animations for HTML5 Canvas in Flash CS6 


Export again 

Hit the Publish button on the 
Toolkit for CreateJS panel to see the 
animation in all its glory. We want this 
animation to play when you click on the 
monster. So return to Flash, double-click 
the monster and select frame 1 of the 
labels layer. Open the ActionScript panel 
and add the code shown below, which 
will stop it playing when exported. 

001 /* js 
002 this.stop(); 

003 */ 


Back to the start 

Select the last frame of the labels 
layer and press F6, then open the 
ActionScript panel and add the code 
shown below. This will send the playhead 
back to the start. Save the file and 
publish it again. We are now ready to edit 
the pages in Dreamweaver to add some 
interactivity to the monster, and enhance 
the user experience. 

001 /* js 

002 this.gotoAndStop(“idle”); 

003 */ 


The library is exportRoot so 
were going to find that phrase 
and replace it with ‘mLib’ for 
monster library 


, Find and replace 

“ Open the HTML file that was published in Dreamweaver and press Ctrl+F on 
the keyboard to do a find and replace. The library is called exportRoot, so we’re going 
to find that phrase and replace it with ‘mLib’ for monster library. This is easier to 
remember and shorter to write. There will only be three instances of this. 



Making it click 

f Find the closing bracket for the handleComplete 
function and add the line of code shown before the 
closing bracket. This tells the monster symbol to 
accept a click and to call the function ‘monsterClick’ 
when the monster is actually clicked. Remember back 
in step 2, we named the instance monster, this is what 
we call it here. 

001 mLib.monster.onClick = monsterClick; 


Adding the interactivity 

Add the function shown below after the closing 
bracket of the handleComplete function. This tells the 
monster’s timeline to jump to the roaring label we 
added in step 3. As you can see it is the same friendly 
code we would use in Flash. Save the project now as we 
have completed the code. 

001 function monsterClick(eventObj) { 

002 mLib.monster.gotoAndPlay(“roaring”); 


Final test 

To witness the fruits of your labour, open the 
page in a browser that is capable of displaying HTML5 
Canvas content. At first, the monster will just sit there 
dormant and blink from time to time until the user 
animates it. Click on the monster and he’ll let out a cute 
roar. What we have now completed is an incredibly easy 
method of adding rich animated content to the Canvas 
element in HTML5. 
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| Build a mobile website using jQue ry an d M obify 


Build a mobile 
website using 
jQuery and 
Mobify 

Learn how to use Mobify to quickly 
build a simple three-page website 

tools I tecli I trends Sublime Text 2, jQuery, DustJS, Mobify Terminal, 
HTML5, CSS3, Safari/Chrome expert Jake Rutter 




his tutorial will show you 
how you can use jQuery, 
HTML, CSS and the Mobify 
for small business (cloud. 
mobify.com/about/ 
overview) platform to 
build a mobile-optimised 
version of a simple 
three-page website in 15 
easy steps. The tutorial 
files are available on the CD included and online at 
github.com/jrutter/webdesigner-mobifytut. By using 
the Mobify solution you can decrease the time it takes 
to create a mobile website using the technologies that 
you are familiar with such as jQuery, CSS3, and HTML5. 
If you want to take it a step further you can use 
advanced coding techniques such as DustJS, Sass, or 
LESS. The Mobify platform supports the following 
mobile operating systems: iOS V3.1.3+, Android v2.1+, 
and Blackberry v6+. You can also build websites 
targeted at tablets, offering ultimate control and 
flexibility of your customer’s website experience. 


Preview Your Mobile Site 

i 



Mobify offers control and 
flexibility for the customer 


<Above> 

• Make sure to occasionally stop 
and preview your mobile site on 
a device to see if it is ready for 
launch, and to check for bugs 


Croat* a Naw Protect 
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Create new project 

Open a web browser and proceed to cloud. 
mobify.com to register an account and create your first 
project. This process will take about 15 minutes and will 
require you to add the Mobify.js tag to your website. 
The tag needs to be installed immediately after the 
opening <head> HTML tag on all of the pages that you 
would like mobile-optimised. 



Install Mobify Tools 

The Mobify Tools are required to be installed 
before you can begin any front-end development. The 
Mobify website will walk you through three steps to 
getting these tools installed, the tools required will need 
Node.js. The website gives instructions on how to install 
for Mac, PC and Linux - this tutorial is using a Mac. 
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Build a mobile website using jQuery and Mobify 


Set up your project 

Continue to set up the project directory on your 
local computer. The tools you have installed will allow 
you to run a local web server to compile your changes 
and preview your changes through a desktop browser. 
The project folder includes a scaffold to get you started 
quickly by providing you with a basic template, header, 
footer, and code examples within the mobify.konf file. 



mobify push --message “Initial Bundle” 

The last step in the set up process involves creating your first 
bundle; a container for all the compiled code that will eventually be 
pushed live. This process is done through a command in Terminal and 
is very easy. Bundles are very powerful as you can deploy them to live, 
but also allow other people to preview bundles before going live. 


04 Choose your content 

Before venturing out on your 
own, a simple demo guides you through 
basic concepts to help you understand 
how the Mobify syntax works. JavaScript 
and jQuery are the main languages 
utilised to build your mobile website, the 
example code is below within the _ 
header.tmpl. The logo is selected using 
jQuery to be included in the header 
template. 





Understanding the 
Mobify structure 

Open the mobify-demo directory 
in your favorite editor, look inside the /src 
directory and you will see a /tmpl directory, 
which is where the page templates are 
stored. There is also a style.css file, which is 
where CSS is stored, and a mobify.konf file, 
which allows you to create page templates 
and pull out page elements using jQuery. 
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Start up preview 

Open up a terminal window and 
type ‘mobify preview’, this 
command will start the local Mobify 
tools server to compile your changes 
on the fly as you develop locally. After 
the server has been started, proceed to 
preview.mobify.com and type in the 
URL that you would like to preview. In 
this case it will be our demo files. 


Develop 
using Safari 

Use the developer tools 
in Safari to inspect 
elements on the 
desktop. This will speed 
up the process of 
creating jQuery selector 
statements and catch 
any errors. 


Create homepage template 

Open the home.tmpl template and mobify.konf, 
use jQuery to select DOM elements and set them up as 
page elements to be pulled into the template. In the 
KONF file lives the template declarations, DustJS is the 
templating language here. Add a DOM element, and by 
inserting the ! symbol you instruct Mobify to only load 
the template if that element exists on the page. 


Add elements to 
homepage 

Next, set up the different elements that make up the 
page. On mobile, less is more, select the following 
elements: image #2, title, sub title, paragraphs and the 
bullet points. In the KONF, find the home declaration, 
setup variables and jQuery selector statements for each 
element that you would like to include in the home.tmpl. 



Add a menu 



01 _Set up the HTML 

Select the DOM elements from the website 
that contain the navigation using jQuery 
in mobify.konf, and include those on the _ 
header template to show the menu. 



02 _Build CSS menu 


Create CSS that will display a tabs menu 
on the mobile device and add it to the 
style.css. You can use CSS3 by targeting 
WebKit browsers using vendor prefixes. 



03 _Add jQuery Effects 


Set up a jQuery on click event that will 
display the menu using the toggle event, 
and also toggle the active class on the nav 
menu icon in the top right. 
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Build a mobile website using jQueryancl Mobify 


Create homepage CSS 

Mobify will automatically add a class containing the template name 
to the <html> tag at the top of each page. Mobify suggests the usage of a 
prefix x-home to all the mobile classes to keep them organised. As you 
create CSS for the homepage, make sure all the styles are wrapped with 
.x-home to ensure that they’re applied to the homepage. 



Create common template 

The Contact and About pages on the desktop 
site both contain a class - common. Therefore we can 
get away with setting up one common template that 
will render both pages using a Don’t Repeat Yourself 
approach. Similar to the homepage template, we use 
the common class in the mobify.konf to render the 
common template if the page loaded contains it. 




Add common 
elements 

Instead of pulling all of the page 
elements into the mobile site, we are 
going to concentrate on just the main 
title and paragraph content. We can 
easily do this by setting up two more 
select statements to select, ‘.common 
#page #content h2’ and ‘.common #page 
#content p’. That should do the trick! 


Create common CSS 

The last step before doing a test build is to add 
some CSS to the common template. The common 


template will have a class added to the opening <html> 
called x-common. In our CSS we just need to add a few 
lines for the styling of the h2 and paragraph tags. 



Test Build and Preview 

It’s time to test your mobile site that you have 
created by creating a bundle as you did in step 5. You 
can create a bundle by opening Terminal and typing 
‘mobify push --message “Test Build’”. When the bundle is 
complete, visit the Mobify website and go to the 
preview page to grab a link that will allow you to test. 



am/ projects / mobify - demo/bundles/ 

<3 a & ft 
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© Mobify Demo 

Upgrade 

Help 

O jake@onerutter com 


Publishing 


I 


B 


Hey, nice! Your mobile site is live. 

To see the results, just point your phone at: 
http://wwwonerutter.com/mobifydemo/index.php 

Let's tell the world about your hard work. Share your mobile site on Twitter, or send 
it out as an email: 

I just launched my mobile website with @mobify. Check it out: 
http://www.onerutter.com/mobifydemo/index.php 


TWEET THIS 


Published Bundle 

#4 


□ 


Production Build 

Qjake@onerutter.com. 5 minutes ago 


Deploy to Production 

Now it’s time to push your work to production. We will create a live bundle by using push bundle command again, 
but changing the message to ‘Production Build’. After the build is finished, login to the mobify site and select the 
production bundle and click publish selected. Within a matter of minutes, the new mobile site will be live. 
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Creating an iOS or Flash product turntable with SketchUp 



Creating an 
iOS or Flash 
product 
turntable with 
SketchUp 

Learn to create an eCommerce 
product turntable for web, iPhone and 
iPad using free tools 

tools I tecli I trends SketchUp 8 (free version), YoFLA 3D Rotate Tool 
expert Robin de Jongh 



s a web designer you will 
often be called on to do 
work outside your normal 
comfort zone, and it’s at 
times like this that you 
can rise to the challenge 
and add valuable, 
additional skills to your 
repertoire. One such skill 
is generating product 

display images. It may not be the sexiest way to earn a 
living, but doing a bit of it here and there around more 
creative work sure could pay some of the bills. In this 
tutorial you will learn how to take this a step further, by 
generating a fully interactive 3D product visual that 
allows customers to view the product from all angles - 
instead of pre-selected photographs. The generated 
code is easily copied and pasted into an eCommerce 
website or product showcase, and you will create both 
Flash and PITML5/JavaScript versions which will 
swipe-rotate and pinch-zoom when viewed on a 
non-Flash device such as an iPhone or iPad. 


Gather your tools 

- For this tutorial you will need to 
SketchUp 8 (sketchup.google.com) and 
the 3D Rotate Tool by Yofla (www.yofla. 
com/flash/3d-rotate/flexi). You also 
need some plug-ins for SketchUp which 
will allow you to set up the virtual 
camera rig you will use to generate the 
images used in your turntable animation. 



SketchUp templates 

Install the Film and Stage plug-in 
by downloading from bit.ly/PccTkl. Now 
open up SketchUp and select one of the 
plan templates as shown. Click Start 
Using SketchUp. You should see an 
empty window. Click on the Get Models 
button (the one with a cardboard box). 
This takes you to the 3D Warehouse. 
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Creating an iOS or Flash product turntable with SketchUp 


Finding 3D models 

When you're working on a client’s site you will 
either construct your own models or use models 
created by a 3D artist. If you're not interested in giving 
this a go for yourself, download a pre-made model now. 
Type in ‘iphone 4' and hit Enter. Select the model you 
wish to use and select Download Model. Click Yes. 




Importing the modes 

Back in SketchUp place the model 
at the intersection of the axes. 

Use the middle mouse button to zoom 
in or out. Now hold it and move the 
mouse to rotate the view. With the Move 
tool, hover over the side of the phone. 
You should see some red crosses. 



Rotating the product 

Click one of the crosses and move the mouse to rotate the 
phone about its centre axis. Check that -90 shows in the bottom-right 
of the screen, then left-click. You've now rotated the phone upright. 
This is all you need to do to prepare a product for an eCommerce 
widget. To skip the modelling section, go straight to step 14. 




Product images 

To have a go at creating a 
photo-based 3D model yourself, read on. 
Go to any phone manufacturer website 
and find a product illustration. Download 
a front, rear and side-view. Crop them in 
an image editor right to the edge of each 
side. Ideally you need views from all six 
sides, but three will do for this exercise. 


Beginning modelling 

I In SketchUp go to File>New, then draw a 
rectangle of any size using the Rectangle tool. 
Select the Push/Pull tool and click on the . 
rectangle, then move up to create a box 
shape and click again. Go to File>lmport 
then select the front image. Select the 
Use As Texture button and select Open. 


Photo-based modelling 

Paste the image onto the top-face of the box by 
clicking the bottom-left corner then the top right. Use 
the Push/Pull tool to move each side of the box to line 
up exactly with the edge of the phone. Import and 
paste the rear image onto the back of the box, clicking 
on the corners of the face. 


Lining up 
images 


1 


Don’t fear 3D 

Web design has always 
been done in two 
dimensions, but don’t 
let that make you fear 
the third dimension. 
Once you get used to 
it you’ll feel liberated. 


You now need to line up the 
rear image with the edges of the 
box. Use the MMB to rotate the view 
so that you can see the back. Right-click the 
rear-face and select Texture>Position. Now use the 
green pin to scale the image and click and drag the 
image to position it. 




Hosting iframes on 
WordPress 



If you have a self-hosted WordPress site, go 
to Plug-ins>Add New. Search for [iframe], 
then click Install. Once this is completed, 
select Activate 

001[iframe style=“border:lpx solid 
silver” marginwidth=“0” 
marginheight=“0” src=” http://www. 
example.com/wp-content/uploads/ 
productl/iframe.html “ width=”100%” 
height=”300”] 


02 _Insert shortcode 

Create a new post and add your title and 
product text. Insert the shortcode as 
shown here, replacing the URL with the 
iframe file in your uploaded folder 



Preview your product to test how it looks, 
then alter the shortcode to suit the 
pixel-width of your WordPress site and the 
output size you chose in the 3DRT tool. 
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Creating an iOS or Flash product turntable with SketchUp 


Sampling photo textures 

Repeat with the side image. Click each of the three faces, then 
right-click and select Texture>Projected. Draw a rectangle at the top of 
the phone, Push/Pull it towards the rear face and Ctrl/left-click. In the 
Materials pallette, click the Sample Paint tool (the eye dropper). 



Creating the profile 

Sample the side of the phone and paste this 
onto the side of the rectangular hole you just created. 
Select the Arc tool and use it to create an arc on each 
side of the phone to follow the phone's contour, as 
shown at points 1 and 2. Use the Arc tool on the front 
face at each corner. 




Radiusing sharp edges 

Use the Push/Pull tool to remove each corner. 
You should now have something similar to the model 
shown here. Double-click the front face. Now hold Ctrl 
and deselect anything except the outer contour of the 
phone. Go to Tools>Follow Me and click in the outside 
of the arc you made in the rectangle cutout. 



Image-based modeling 
is going to catch on for 
the 3D web 


Image-based modeling (the technique 
that you have been learning here) is 
absolutely perfect for the web. Now 
that there’s an overwhelming 
consensus that the future of the web is 
HTML5 and WebGL, we’re going to see 
3D objects, scenes, environments and 
even games coming on to the 
webpage. This has always been 
possible with Flash, but never before 
have we been able to do this directly 
on to the webpage itself without 
plug-ins. It’s an exciting time for 
people who know image-based 
modeling, because this is the only 
way of making 3D content that allows 
for realistic yet low file-size models to 
be shown within browsers across all 
devices, including processor 
challenged phones and tablets. Basing 
models on photographs is also simpler 
than traditional modeling, allowing 
you to create models yourself. 


The finished product! 

This creates a smooth radiused edge all round 
the phone. Repeat for the rear face as you can see here. 
Sample and paint the front and rear textures back onto 
the new radiused faces using the Sample Paint tool. Use 
the Push/Pull tool to close the rectangular gap you 
created. Save your phone as it is now finished! 




Changing view style 

From now on you can use either your own 
model or the one you downloaded. Ensure your phone 
is centred and upright as per steps 4 and 5. Open the 
Styles pallette (Window>Styles) and select Default 
Styles>Shaded with Textures. Go to the Edit tab and 
un-tick Edges and Profiles. 
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Selecting and 
de-selecting 

Return to the Select tool at 
any time by pressing the 
Spacebar. Also make use of 
the Esc key to deselect 
everything and start 
selecting afresh. 




Creating the camera 

I Your model has now lost the 
cartoon look. Click the icon at the top-left 
of the Styles pallette to save changes to 
the style. Use the middle mouse wheel to 
zoom and rotate to get the starting view 
you want for your turntable. Go to 
Camera>Create Camera. You will see a 
cross in the middle of the screen. 
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Creating an iOS or Flash product turntable with SketchUp 


Focusing the camera 

Ctrl/Left-click on the screen and move the mouse left/right to 
pan the camera until the cross is central. You should be able to gauge 
this with the blue axis. Save the camera view with right-click>Done. 
Now rotate the view slightly (MMB) and zoom out. Can you see the 
camera you just created? 



Wireframe view style 

Notice that at the top-left of the window you 
have automatically created a tab called Camera 1. Click 
this at any time to look through the camera again. Now 
select the Wireframe view style (View>Toolbars>Styles 
to display the toolbar). Select the Camera, then select 
the Rotate tool. Click on the Origin as shown here. 




Creating 12 cameras 

Move your cursor along the 
green axis and left-click, then press 
Control and move to the right and click 
again. Enter 30’ and press Enter. The 
Camera copies 30 degrees around the 
centre of the phone. Now type 11x’ and 
hit Return. You now have 12 copies of the 
Camera, stationed around the phone at 
30 degree intervals. 


Setting up animation 

f In the Styles pallette, select the home icon and 
the View Style from earlier. Right-click on the first 
camera and select Look Through Camera. Right-click 
and select Done. Right-click the Camera tab, then select 
Add. Do this for each camera, working anticlockwise. 



Action! 

You should now have 12 scenes. Go to 
View>Animations Settings and tick Enable Scene 
Transitions, set it to 1.5 seconds, and enter ‘O' in the 
Scene Delay box. Close and Go to View>Animation>Play. 
You should have a smooth turntable animation. 



Export individual frames 

Export the individual frames of the animation by 
going to File>Export>Animation, then select JPEG from 
the drop down box. Select Options and enter 640 and 
480 into the Width and Height fields. Select Frame Rate 
5 and tick Loop to starting scene. Click OK and enter a 
filename. Click Export. 
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Creating an iOS or Flash product turntable with SketchUp 


Using 3DRT tool 

Open 3DRT Setup Utility. Locate your images 
and drag and drop them into the orange box at the 
top-left. Set Duration to three seconds. Tick the HI-RES 
box if you would like to enable the high-resolution zoom 
feature (this takes longer to download on the webpage). 
In Advanced Settings and the Rotation tab, un-tick 
Rotate On Start. 


23 Hotspots 

Select Return. Click the Hotspots button. Click 
Next until you can see the rear camera. Press Click to 
add hotspot. Select Image Hotspot. Enter a title and 
Browse to find an image. Go online, find and save a 
close-up of the camera, then go back to this dialog box 
to select it. Type in some details, then hit Save. 





Choosing a skin 

Left-click and hold Place, then drag the hotspot 
to the centre of the camera. Click Wizard. Follow the 
instructions and click Next. Tick Hide in back, click Done, 
then select Return. Choose a Skin and Output Size then 
select Create. Create a folder to export all the necessary 
files to, then navigate to it and browser test the 
index.html file. 



25 Upload to web 

Upload the entire directory to your web server. 
You could now copy and paste the code from the 
index.html file into your web page, but it’s much easier 
to use the iframe that’s been created for you. Just copy 
this code into your page, substituting the /wp-content/ 
uploads/productl/ with the location of your folder, and 
setting the desired height and width. 

001 style=”border:lpx solid silver;” 

002 marginheight=”0” 

003 marginwidth=”0” 

004 scrolling=”no” 

005 src=”http://www.example.com/wp-content/ 

006 uploads/productl/iframe.html” 

007 width=”400” 

008 height=”300”> 

009 <p>Your browser does not support 
iframes.c/ 

010 p> 

011 </iframe> 

The finished widget 

You now have the finished rotating product 
carousel. This will load as a Flash file as default, with a 
fallback option of a JavaScript version for non-Flash 
devices such as iPhone and iPad. On the iPhone and 
iPad version, the touchscreen functionality means the 
user can swipe to rotate and pinch to zoom, which is a 
nice feature for today’s mobile driven consumers. 
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| Create multi-colu mn lay outs with CSS 



multi-column 
layouts 
with CSS 

Take advantage of browser support 
and create great multi-column layouts 

tools I tecli I trends HTML editor, CSS editor (we used Dreamweaver for 
both, but any will do) expert Sam Hampton-Smith 
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<Above> 

• The basic HTML markup consists of 
a single <article> tag with paragraphs, 
headings and image content 


mainstay of newspaper and magazine 
print design is the humble column. 

Columns help to improve the readability 
of text, ensuring that the consumer 


Create your HTML 

We're using a basic HTML5 document with a 
single article, complete with header and footer. 
Fortunately, the HTML markup is as basic as you can 
get; we’ve got a series of paragraphs, a few heading 
tags and a couple of images. You can either open our 
start.html document from the resource disc, or use your 
own content. 

Add a stylesheet 

We're going to leave the HTML alone 
throughout, with all the changes that we make 
happening in a stylesheet. Let’s create that now by 
saving a new plain text document into the styles folder 
as 'screen.css'. Create a link to it from the HTML 
document with the code shown below. 

001 clink rel=”stylesheet” type=”text/css” 
href=”styles/screen.css” /> 

Basic properties 

We'll start off by giving our article a bit of basic 
styling, using typography and spacing, to create the 
general look and feel of a newspaper. Add the CSS rules 
below to your stylesheet document to set this up, and 
preview in your browser. Note that even the most 
recent web editors don’t tend to fully support columns 
yet, so you’ll need your browser on hand a lot to test 
during this tutorial. 


: j:: : . doesn’t lose their place in lines of the text 

001 

/* CSS Multi¬ 

-Column Layouts */ 

::::::::::: that are too long. 

002 

body { 


For a long time, web designers have 

003 

background: 

#444; 

attempted to bring this staple 

004 

font-family: 

georgia, times, serif; 

typographical design element to the 

005 

font-size: 

62.5%; 

screen, but have always been restricted 

006 

line-height: 

1.4em; 

by the need to set up complicated floating elements, 

007 

> 


and no support for automatically flowing text content 

008 

article { 


across columns. 

009 

position: 

relative; 

A CSS module to support multi-column layouts was 

010 

margin: 

auto; 

first discussed in 1999, so it’s been a long journey to get 

011 

width: 

920px; 

to the point where we can start to use the properties 

012 

padding: 

20px; 

made available. Thankfully, with the release of Internet 

013 

background: 

white; 

Explorer 10, all the major browser vendors will support 

014 

box-shadow: 

0px 0px 10px #333; 

the standard to a greater or lesser degree 

015 

} 


In this tutorial we’re going to examine the primary 

016 

article p { 


properties available to achieve multi-column layouts. 

017 

font-size: 

1.2em; 

starting with some basic HTML5 markup. We’ll not only 

018 

line-height: 

1.6em; 

create a flexible layout, but also look at some of the 

019 

> 


current limitations, and how to best take advantage of 




the feature today. Finally, we’ll see how you can 

04 

Introducing columns 


repurpose your design to support different screen sizes 
and resolutions. 


A CSS module to support multi-column 
layouts was first discussed in 1999, so it’s 
been a long Journey 


iil 


! CSS allows you to set up columns in any 
block-level element by using the column-count 
property. The column-count property accepts a 
number representing the number of columns you’d like 
the element to be split into. Try adding the code below 
to your existing article rule in the stylesheet so you can 
see this in action: 

001 column-count: 2; 
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Create multi-column layouts with CSS 



<Left> 

• We’ve introduced the column-count 
property with CSS, allowing us to 
automatically flow content into two columns 

<Right> 

• By setting the column-width or column-gap 
properties we can tailor the columns to suit 
our design and spacing preferences 

<Below> 

• Working on our final design we’ve opted for a 
four-column layout on desktop machines 




Vendor prefixes 

As with many of the CSS3 properties and 
modules, columns currently need you to employ 
browser-specific vendor prefixes to call and set the 
property. Well need to duplicate our rules using -ms-, 
-webkit-, -moz- and -o- before each property to target 
the big five - Internet Explorer, Safari/Chrome, Firefox 
and Opera - respectively. 


versa. If you specify a width that’s too big for the 
element, the browser will override your setting. 


001 -webkit-column-width: 20em; 

002 -moz-column-width: 20em; 
003 -o-column-width: 20em; 
004 -ms-column-width: 20em; 
005 column-width: 20em; 


001 -webkit-column-count: 2; 

002 -moz-column-count: 2 
003 -o-column-count: 2 
004 -ms-column-count: 2 
005 column-count: 2; 


Set the gutter width 

- You can manually set the width of the gap 
between columns using the column-gap property. If 
you'd like a wider gap between columns, set a higher 
column-gap value or to achieve closer columns set it 
lower. If you omit the column-gap property, the browser 
will automatically format a gap for you. 


001 -webkit-column-gap: lem; 

002 -moz-column-gap: 

003 -o-column-gap: 

004 -ms-column-gap: 

005 column-gap: lem; 

Set the column width 

Similarly, you can control the width of your 
columns using the column-width property. As with the 
column-gap property, if you don’t set this explicitly the 
browser will calculate the value for you automatically. If 
you only set the column width, the gap will be 
calculated to fit the width of the container, and vice 


lem; 

lem; 

lem; 


A word on limitations 

You can’t currently set different widths for 
different columns, so if you want to have one wide 
column and two narrow columns, you’ll have to nest 
elements inside columnar layouts. This limitation may 
be addressed by the W3C in the next iteration of the 
CSS Columns module 

Flowing content 

By default your content will flow automatically 
from one column to the next, and the length of the 
overall element (in our case an <article> tag) will be 
adjusted to fit a balanced fill of columns. This ensures 
the final product looks tidy and clean. You can overwrite 
this setting with the column-fill property. 


001 -webkit-column-fill: balanced; 
002 -moz-column-fill: balanced; 
003 -o-column-fill: balanced; 
004 -ms-column-fill: balanced; 
005 column-fill: balanced; 


Setting up our layout 

• Let’s take what we’ve got so far and apply it to 
our article to create a nice multi-column layout. We’ll 
start off with four columns, and allow the content to fill 
the columns automatically. We will also make our first 


paragraph a bit bigger, so as to act as an introduction to 
the main piece. 


001 

002 

003 

004 

005 

006 

007 

008 

009 

010 

011 

012 

013 

014 

015 

016 

017 

018 

019 

020 

021 

022 

023 

024 

025 


article { 

position: relative; 

margin: auto; 

width: 920px; 

padding: 20px; 

-webkit-column-count:4; 
-moz-column-count:4; 
-o-column-count:4; 
-ms-column-count:4; 


column-count: 

4; 

-webkit-column-gap: 

10px; 

-moz-column-gap: 

10px; 

-o-column-gap: 10px; 
-ms-column-gap: 

10px; 

column-gap: 10px; 

background: white; 

box-shadow: 0px 0px 10px #333 

> 

article p { 
font-size: 1.2em; 

line-height: 1.6em; 

} 

article p.intro { 

font-size: 1.6em ! 

I important; 


} 


Test and review 

If you load up the page inside your browser now, 
you should see a nicely balanced four-column layout 
with text balanced nicely between the four columns. 
You’ll notice that some of the text should perhaps flow 
across multiple columns though, especially in the 
header. Let’s address that next. 
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I HAVE A DREAM 
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Headings and pull quotes can 
span multiple columns 


<above> 

• The column-span 
property allows us to 
set the main headline 
across the four 
columns of paragraph 
content beneath 


Facing oppression for being 
black. Dr King headed a rally 
in Washington D.C. to 
campaign for equality between 
citizens of the USA, regardless 
of the colour of their skin. 


But one hundred years Utter, the Negro 
still is not free. One hundred years later, 
the life of the Negro is still sadly crippled 
by the manacles of segregation and the 
chains of discrimination. One hundred 


own land. So we have come here tod 
dramatize a shameful condition. 


The Speech 

1 am happy to join with you today in what 
will go down in history as the greatest 
demonstration for freedom in the history 
of our nation. 


In a sense we have come to our natu 
capital to cash a check. When the 
architects of our republic wrote the 
magnificent words of the Constitutii 
and the Declaration of Independenc 
they were signing a promissory note 
which every American was to fall he 
This note was a promise that all mei 
black men as weO as white men. wca 
guaranteed the unalienable rights of 
liberty, and the pursuit of happiness 


Five score years ago. a great American, in 
whose symbolic shadow we stand today, 
signed the Emancipation Proclamation. 
This momentous decree came as a great 
beacon light of hope to millions of Negro 
slaves who had been seared in the flames 
of withering injustice, it came as a joyous 
day break to end the long night of their 
captivity. 


It is obvious today that America has 
defaulted an this promissory note ir 
as her a tire ns of color are concemec 
Instead of honoring this sacred 
obligation. America has given the N 
people a bad check, a check which hi 
come back marked ‘insufficient fun 
But we refuse to believe that the bar 
justice is bankrupt We refuse to bel 
that there are insufficient funds in t 
great vaults of opportunity of this ru 
So we have come to cash this check ■ 
check that will give us upon demand 
riches of freedom and the security a 


I have a dream that one day on the red hilh 
of former slave owners will be able to sit do 


at the unspeakable horrors of pohce 
brutality. We can never be satisfied, 
long as our bodies, heavy with the U 
of travel cannot gain lodging in the 
motels of the highways and the hate 


Spanning columns 

Headings and pull quotes can be set to span 
multiple columns by using the column-span property. 
Currently this property only supports two values: none 
or all. This means that your content will either break out 
and flow across all the columns in your layout or will 
conform to the column layout. Add the code below to 
see this in action:. 

001 article header { 

002 position: relative; 

003 display: block; 

004 -webkit-column-span:all; 
column-span: all; 

005 border-bottom: 2px solid #333; 

006 } 

007 article header hi { 

008 font-size: 9.5em; 

009 line-height: lem; 

010 font-weight: bold; 

011 text-transform: 
uppercase; 

012 margin: 0; 

013 padding: 0; 

014 } 


015 article header h4 { 

016 text-align: right; 

017 margin: 0; 

018 padding: 0; 

019 } 

23 Images and columns 

You'll notice that the images in our original 
markup are rendering perfectly inside the column 
width. This would be the case regardless of the size of 
the image, so long as you leave the width and height 
attributes out of the <img> tag. Doing so means you can 
use images just as you normally would, without 
worrying about how they are going to fit into variable- 
size columns. 

Breaking columns with 
spanned elements 

About halfway down our article we’ve got an aside 
element, which is acting a bit like a pull quote. We're 
going to use this to break up our columnar layout by 
applying the column-span property to the aside 
element. While we're at it, well add a border to the top 
and bottom to help separate the element visually. 


001 article aside { 

002 position: relative; 

003 display: block; 

004 font-size: 2.2em; 

005 line-height: 1.8em; 

006 font-style: italic; 

007 -webkit-column-span:all; 

008 column-span: all; 

009 border-top: 2px solid #333; 

010 border-bottom: 2px solid #333; 

011 margin-bottom: 20px; 

012 } 

Column behaviour 

Reload the page in your browser to see the 
breakout <aside> in situ. Notice that the columns now fill 
left to right above the <aside>, and then pick up again 
beneath it with the content that appears after it. This is 
important behaviour to recognise when using columns 
- any element that spans columns breaks the structure. 

Applying column rules 

' As well as providing a border to the spanning 
elements, we can also apply a defined visual separation 
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nv promises of democracy. Now is the time 

to rise from the dark and desolate valley 
of segregation to the sunlit path of racial 
50 5 justice. Now is the time to lift our nation 
from the quick sands of racial injustice to 
the solid rode at brotherhood. Now is the 
® time In make jnstire » reality fhr all rf 

e ’ God's children. 



iknf 


ieve It would be fatal for the nab on to overlook 
he the urgency of the moment This 
bon. sweltering summer of the Negro's 
- * legitimate discontent will not pass until 
, the there is an invigorating autumn of 
f freedom and equality. Nineteen sixty- 


until the Negro is granted his citizenship 
rights. The whirlwinds of revolt will 
continue to <h»kr the foundations of our 
nation until the bright day of justice 
emerges, but there is something that 1 
must say to my people who stand on the 
warm thrrdinU which trade into thr 

palace of justice. In the process of gaining 
our rightful place we must not be guilty of 
wrongful deeds. Let us not seek to satisfy 
our thirst tor freedom by drinking tram 
the cup of bitterness and hatred. 

We must forever conduct our struggle on 
the high plane of dignity and discipline. 
We must not aOow our creative protest to 
daganarata into phycical viola noa. Again 
and again we must rise to the majestic 
heights of meeting physical forte with 
soul force. The marvelous new militancy 
which has engulfed the Negro community 
must not lead us to a distrust of all white 
people, for many of our white brothers, as 
evidenced hy their presence here Inday 
have come to realize that their destiny is 
tied up with our destiny. They have come 
to realize that their freedom is 
inextricably bound to our freedom. We 
cannot walk akmc. 


; of Georgia the sons of former slaves and the sons 
um together at the table of brotherhood. 


ri persecution and daggered hy the 
as winds of police brutality. You haw been 
tigue the veterans of creative suffering. 

Continue to work with the faith that 
Is of unearned suttenng ts redemptive. Go 


hilk of Georgia the sons of former slaves 

and the sons of former slave owners will 
be able to sit down together at the table of 
brotherhood. 

1 have a dream that one dav even the 
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<abovc, top to bottom> 

• The completed design, when viewed on a 
desktop screen with a window size greater than 
960px wide, has four columns of balanced content 

• As the screen or window width reduces, our 
design reflows to a three-column layout, allowing 
us to make better use of the available space 
<left> 

• By applying the same column-span property to a 
pull quote we can break up the columns, aiding 
readability and improving our design 


Breaking columns 

You can force a break in the 


to the columns themselves by using the column-rule 
property. This accepts arguments similar to the border 
property in CSS. Try adding the code below to your 
<article> rule in the stylesheet, to see an example of 



column rules in practice. 


001 -webkit-column-rule: lpx solid #333; 

002 -moz-column-rule: lpx solid #333; 

003 -o-column-rule: lpx solid #333; 

004 -ms-column-rule: lpx solid #333; 

005 column-rule: lpx solid #333; 

Style the footer 

Well use some of the properties we’ve covered 
above to style the footer element, which is going to 
round off our article nicely. First it should span the 
columns, have a border top and bottom, and well add 


004 -webkit-column-span:all; 

005 column-span: all; 

006 border-top: 2px solid #333; 

007 border-bottom: 2px solid #333; 

008 padding: 10px; 

009 margin-bottom: 20px; 

010 } 

Preview and test 

We've just about completed our basic column 
layout now, so before we attempt to make it flexible 


some margin and padding to help it get some distance 
and sit apart from the content a little. Add the rule 
below to put this in place. 

001 article footer { 

002 position: relative; 

003 display: block; 


enough to work across different resolutions on multiple 
devices, it's a really good idea to preview it in your 
browser, and then make sure it works across all the 
common browser options you plan to support. 

Always remember that you can use Modernizr to 
test for column support and provide a fall-back for 
older browsers. 


} Fluid layouts 

Up until now we've had a fixed-width for our 
article, set at 960px. We’ll change this by using @media 
queries inside our stylesheet. The only element that 
needs to change is the <article> rule, with the width and 
number of columns adjusted to suit the screen width. 
Add the code below in place of the existing article {} 
rule to start: 

001 @media all and (min-width: 960px) { 


002 

article { 



003 

position: relative; 


004 

margin: auto; 



005 

width: 920px; 



006 

padding: 20px; 



007 

-webkit-column-count: 

:4; 


008 

-moz-column-count: 

4 


009 

-o-column-count: 

4 


010 

-ms-column-count: 

4 


011 

column-count: 

4 


012 

-webkit-column-gap: 

10px; 

013 

-moz-column-gap: 

10px; 

014 

-o-column-gap: 

10px; 

015 

-ms-column-gap: 


10px; 

016 

column-gap: 10px; 



017 

-webkit-column-rule: 

lpx solid #333; 

018 

-moz-column-rule: 

lpx solid #333 

019 

-o-column-rule: 

lpx solid #333 

020 

-ms-column-rule: 

lpx solid #333 

021 

column-rule: lpx solid #333; 

022 

background: white; 



023 

box-shadow: 0px 0px 10px #333; 

024 

} 



025 

} 



026 

@media all and (max-width 

: 959px) and 

(min-width: 481px) { 



027 

article { 



028 

position: relative; 


029 

margin: auto; 



030 

width: 90%; 



031 

padding: 20px; 



032 

-webkit-column-count: 

:3; 


033 

-moz-column-count: 

3 


034 

-o-column-count: 

3 


035 

-ms-column-count: 

3 


036 

column-count: 

3 


037 

-webkit-column-gap: 

10px; 

038 

-moz-column-gap: 

10px; 

039 

-o-column-gap: 

10px; 

040 

-ms-column-gap: 


10px; 

041 

column-gap: 10px; 



042 

-webkit-column-rule: 

lpx solid #333; 

043 

-moz-column-rule: 

lpx solid #333 

044 

-o-column-rule: 

lpx solid #333 

045 

-ms-column-rule: 

lpx solid #333 

046 

column-rule: lpx solid #333; 

047 

background: white; 



048 

box-shadow: 0px 0px 10px #333; 

049 

} 



050 

} 
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| Create multi-col umn lay outs with CSS 


CSS Media 


Browser support and 
providing a fallback 


Browser vendors have been pretty slow to adopt 
the CSS column module, to the extent that it’s 
only really in 2012 that we’re able to start using 
the properties and reasonably expect browsers 
to render as intended. Sadly, as with everything 
else on the web, we can’t assume that every user 
visiting our page will have the most recent 
version of their browser, so it’s important to 
consider how to style content for browsers that 
don’t support columns, such as Internet Explorer 
9 and older. 

Luckily there’s a really simple solution that 
allows us to target browsers on the basis of their 
feature set rather than identifying all non- 
compliant versions. The Modernizr script, found 
at www.modernizr.com, allows us to quickly 
identify and target features rather than browsers 
by simply using class names in our CSS selectors. 
Read more at the Modernizr website. 


I HAVE A DREAM 

Speech by Dr. Martin Luther King 

In 1963 Martin Luther King gave a speech that 
has become a defining moment in the history 
of the United States. Facing oppression for 
being black, Dr King headed a rally in 
Washington D.C. to campaign for equality 
between citizens of the USA, regardless of the 
colour of their skin. 

The Speech 

1 am happy to join with you today in what will go down in 
history as the greatest demonstration for freedom in the history 
of our nation. 

Five score years ago, a great American, in whose symbolic 
shadow we stand today, signed the Emancipation Proclamation. 
This momentous decree came as a great beacon light of hope to 
millions of Negro slaves who had been seared in the flames of 
withering injustice. It came as a joyous daybreak to end the 
long night of their captivity. 


You can use CSS 
media queries in your 
<link> tags to separate 
out different styles for 
different devices. This 
can keep your code 
tidy if you reformat 
your page for 
different devices. 


<I.eft> 

• The same principles 
have been used to 
create a single-column 
mobile layout for 
devices with a screen 
width less than 520px 


20 Adjust the fonts 

•' You'll notice as you expand and collapse the size 
of your browser window, the columns jump from four 
down to three as your window becomes narrower than 
960px. We need to adjust the size of the headline to suit 
using the same method we've employed for the 
<article> rule: 

001 @media all and (min-width: 960px) { 

002 article header hi { 

003 font-size: 9.5em; 

004 line-height: lem; 

005 font-weight: bold; 

006 text-transform: uppercase; 

007 margin: 0; 

008 padding: 0; 

009 } 

010 } 

011 @media all and (max-width: 959px) and (min- 
width: 481px) { 

012 article header hi { 

013 font-size: 5em; 

014 line-height: lem; 

015 font-weight: bold; 


016 text-transform: uppercase; 

017 margin: 0; 

018 padding: 0; 

019 } 

020 } 

Target mobile devices 

The typical mobile device has a resolution of 
480px or less in landscape mode, although this is 
changing with the arrival of higher resolution devices 
- like the iPad's phenomenal Retina display. We can 
create a no-columns layout for these devices to make it 
easier to read our content on smaller screens. This 
works using the same principles as we’ve established in 
the previous steps. 

001 @media all and (max-width: 519px) { 

002 article { 

003 position: relative; 

004 width: 90%; 

005 margin: auto; 

006 padding: 20px; 

007 -webkit-column-count:1; 

008 -moz-column-count: 1; 


009 

-o-column-count: 

1; 

010 

-ms-column-count: 

1; 

011 

column-count: 


1; 

012 

padding: 

10px; 


013 

background: 

white; 


014 

box-shadow: 

0px 0px 

10px #333; 

015 

} 



016 

article header hi { 


017 

font-size: 

3em; 


018 

line-height: 

lem; 


019 

font-weight: 

bold; 


020 

text-transform: 

uppercase; 

021 

margin: 

0; 


022 

padding: 

0; 


023 

> 



024 

} 




Test and repeat 

Now you've got a responsive, fluid layout that will 
change to suit the screen it’s being viewed on, all while 
employing a popular offline layout approach where 
content is arranged into columns. Test across different 
devices, and start taking advantage of columns in your 
next design project! 
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Design for a better web 



hobbyists and professionals 
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creating stunning 


DVDs 


Web Design: From Desktop 
to Dotcom eMag Vol. 1 

A visual guide to Flash, 
Dreamweaver and Photoshop. 
256 pages of walkthroughs 
on one disc! A project-based 
workout for any webslinger! 
Master tools, receive technical 
advice and read inspirational 
features. 

£4.99 




,&)Query 


BWeb Design Vol. 6 

Creative guides for designing 
next-gen websites. In-depth 
features to bring you up 
to speed on all the hottest 
technologies. Step-by-step 
tutorials showing you how 
to design amazing websites 
using CSS3.HTML5, Flash, 
Photoshop and more. 
£14.99 


Web Design Vol. 5 

This book provides a 
comprehensive collection of 
visual lessons on the essential 
techniques needed to create 
awe-inspiring websites. 

£6.49 with code “DOTCOM” 


Web Designer eMag Vol. 1 

Enjoy 21 issues of Web 
Designer on one interactive 
disc. Over 1800 pages 
of expert tutorials, case 
studies & features. Plus 
bonus tutorial workshop files 
included. 

£9.99 


The Web Design Book Vol. 1 

Bringing you up to speed with the new digital 
landscape, the The Web Design Book Vol. 1 will 
give you a tour of the latest developments in 
web design and show you how to use these new 
tools to create a truly original site. 

£14.99 


Web Designer eMag Vol. 2 

A complete archive of Web 
Designer magazine issues 137- 
148. Over 824 pages of cutting- 
edge trends and techniques! 
Free - 256 page Web Design 
Vol. 03 bookazine included in 
pdf format. 

£9.99 


Order online 


IMAGINE 

PUBLISHING 


Email eshop@imagine-publishing.co.uk 


Become an ImagineShop 
customer and leave reviews of 
your favourite products. 


Add creativity and flair to your online projects 
with an essential range of training products for 


Twitter @imagineshopuk 
FaceBook /ImagineShopUK 


MAGAZINES 


BOOKS 


DVDS 


DOWNLOADS 


GIFTS 


Prices correct at time of going to press. 
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Creative web headers 
with Google Ventures 

inspiration www.googleventures.com 



INSPIRATION 


Keeping it clean 
and simple 

One of the best parts of the Google 
Ventures site is the clean and easily 
defined sections of the pages. This gives 



he first part of any website 
that your visitors are going 
to look at is the header, but 
so many headers are 
either over-designed or 
your eyes pass over them 
in less than a second. 
Google Ventures, in 
contrast knows how to get a user’s 
attention with its large header that 
encompasses both a hero section and 
menu. The unique part about this site is 


that when the user scrolls up the page 
the main content moves over the top of 
the fixed header section. The stunning 
use of imagery gives a great backdrop 
to the theme. Being venture capital, 
the image shows people who 
have overcome the rugged 
terrain which makes for a 
fitting metaphor. This in 
turn becomes a nice 
clean backdrop for the 
typography to sit on. 


Achromatic text 

The text is all either black, 
grey or white for the site, which is an 
achromatic colour scheme. This is a 
great way to allow the content on the 
page to shine through with the only 
colour used in images and icons. 

Remember, achromatic colour schemes 
are neutral so can be used with any 
combination of colours. 


good contrast between the header, the 
main content and the footer, which 
demonstrates the virtues of simple 
design. The background to the main 
content has a repeated image, but this is 
a very low-key diamond pattern that 
adds just the right amount of texture 
without being overbearing. Each of 
the pieces of content is laid out in a 
masonry style that WD covered in 
issue 195. The final effect looks 
fairly basic, but it’s actually 
well-crafted elegance at its best. 


A radically different kind of venture fund 

Our hands-on teams work with portfolio companies full time on deslgrv reuuitir^ 
marketing, and engineerir^. Startup Lab is a'dedicated facility and educational program L 
wlrere companies can rrreeL learn, work, ahd sJwre. We invest hundred* of millions 
of dollars each year In entrepreneurs with a Irealtfrydlyegard for llie impossible. 


Now you see it... 

Scroll up the page to see the header 
stay in place while the remaining 
content moves over the top and 
eventually obscures it. This is another 
quirk that makes it stand out. 


Block by block 

The content is displayed using a 
masonry-style layout that we showed 
you how to build in a Web Workshop in 
issue 195. Each section has an image 
and a colour-coded icon to indicate 
how Google supported each venture. 


Keep scrolling 

The Ventures site includes a 
small scrolling gallery in one 
corner to showcase a few of the 
companies that Google has 
already worked with to push the 
boundaries of web design. 


Web fonts 

Using CSS3 web fonts 
-from Google, of 
course-the 
typography stands out 
against the image. A 
CSS drop shadow on 
the text means it 
remains legible 
against the scenery. 


Feature header 

Why have a header, 
hero and menu, when 
you can combine all 
three into one 
stunning feature on 
a site? The header 
section can bean 
often-overlooked area 
to experiment with. 


Complementary 

imagery 

The image used is 
thematic of success, 
but it also contains 
colours that work well 
together. As such it 
creates a great focal 
point that perfectly 
complements the 
website’s content. 
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<comment> 

What our 
experts think 
of the site 


Knowing when to stop 

“The Google Ventures site retains the simplistic approach that Google brings to 
many of its web apps, but this site injects just enough design sense without it 
being overkill; it’s a classic case of less is more. Ultimately websites that stick to 
this age-old principle give many of us web designers - both newbies and 
old-timers - a really valuable lesson: know when to stop designing!” 

Mark Shufflebottom 


I TECHNIQUE Creating the fixed header 


Page structure 

Add the code below into the body tag. This gives 
us a div tag at the top of the page that contains the 
fixed image. Inside this we add the text in the HTML5 
header tag. The article tag that follows is the main body 
of the website to put all of your page content. 

001 <div id=”top”> 

002 <header><hl>A radically different 
kind of header</hl> 

003 <p>Here is the next section of text 
description.</p> 

004 </header> 

005 </div> 

006 <article><p>This is where the next 
section would go</p></article> 

Style time 

' In the head section, add the style tags with the 
paragraph and body margins set to Opx. This stops the 
header starting with a gap. The remaining code will all 
be placed inside the closing style tag. Once you’ve 
added the code place your cursor before that tag. 

001 <style> 

002 p{margin:0;padding:0} 

003 body {margin: 0px;} 

004 </style> 

Add the image 

So now add the following code into the style tag. 
This makes the text colour white, while making the div 
tag fill the full width of the browser and the full 500px 



Technique 

Creating a fixed image like this one on Google Ventures is 
easy with the right image and the appropriate CSS styling. 
Adding your own web fonts completes the look. 


height of the div tag. The image is added and we make 
this section fixed so that it won't scroll with the page. 

001 #top { 

002 color: #FFF; 

003 height: 500px; 

004 width: 100%; 

005 position: fixed; 

006 background-image: url(img/header. 
jpg); a 

007 background-position: center; 

008 } 

Header text style 

" The next block of code tells the header to sit 
300px from the top of the screen. It’s centred with a 
width of 960px and the text is also centred in this block. 
It’s important when using HTML5 tags to set them as a 
block element if you want them to display like a div tag. 

001 header { 

002 display: block; 

003 height: 200px; 

004 width: 960px; 

005 text-align: center; 

006 padding-top: 300px; 

007 margin-right: auto; 

008 margin-left: auto; 

009 } 

The rest of the page 

~ The remaining page is the article tag, so we make 
the background colour of this white. Again we centre 
the text and make it longer than the page. Save this and 
open it in the browser to see the full-width header with 
the content that scrolls over this fixed section. 

001 article { 

002 background-color: #fff; 

003 display: block; 

004 height: 1200px; 

005 width: 100%; 

006 text-align: center; 

007 padding-top: 100px; 

008 z-index: 5; 

009 position: absolute; 

010 top: 500px; 

011 } 



TECHNIQUE 

Styling the 
header image 


Preparing the image for the header is an 
important part of the process; the blurs that 
are added at the edges help compress the 
image. Here we reveal exactly how to get 
the same style using Photoshop. 



Source an image 

To get the Google Ventures look, we 
need an image of a beautiful landscape; 
compfight.com is a great Flickr search tool 
for finding Creative Commons photos. Open 
this in Photoshop once you’ve found one. 



Resize the image 

* Using the Crop tool, crop the image 
to the full width but only 500px high. Press 
Q to switch to the Quick Mask mode. Grab 
the Gradient tool and drag from about a 
third in from the left over to the far left. 



Blur the background 

Press Q to leave Quick Mask mode 
and add a 9px Gaussian Blur. This cuts down 
on the final pixel data so you can compress 
the image better. Repeat the Quick Mask 
and Blur process with the other side. 


web workshop 


65 























<tutorials> 


Need an inspirational site dissected? 3 webdesigner@imagine-publishing.co.uk 



Circular web design 
trends 

inspiration www.dotmick.com 


he circular trend has been 
spotted - no pun intended 
- in web design for some 
time. But recently designers 
have grasped this style by 
‘the nettle' pushing it to the 
forefront of style. 

Rather than a backlash to 
Web 2.0 styles, some designers believe 
the new-found appeal of 2D circular 
shapes is simply relative to the drive of 
new technologies. Mickael 
Larcheveque (dotmick.com) is one 
such designer, as he explains: "I must 
admit that the emergence of HTML5 
has contributed to this change. This 
new start with a new technology, gives 
us the need to simplify our current 
work. Layouts are getting minimised as 
shapes are too. Were back to one of the 
most simplified shapes, the circle.” 

Many designers will also use 
software such as Adobe Photoshop 


and Illustrator to quickly and easily 
generate assets. Such shapes can then 
be radicalised through variable uses, 
such as navigation links, footer icons - 
commonly logos, and most popularly 
as displays for portfolio images. 

Using circular design for the latter is 
described as a "smooth and efficient 
way of getting the attention" by 
Larcheveque. He adds: “The UX in my 
website is much more driven about a 
shape concept (dotmick - dot), how I 
can play with it, and build it in a way 
where a user can have fun or can 
experience a nice journey throughout 
the content.” 

Or perhaps ultimately, the enduring 
appeal of the circle is, as designer 
Marco Rosella (marcorosella.com) 
eloquently puts it: “[The circle] has 
been chosen as the perfect element of 
discontinuity in a world dominated 
from things born by squares.” 



<comment> 

What our 
experts think 
of the site 


Adobe Muse 

“Muse is the latest in automated web design and has one of the 
coolest web features around today, known as Place Photoshop 
Button. This radicalises circular buttons, matching subsequent 
layers to each button interactive - Normal, Rollover and Mouse 
Down states” 

Adam Smith, Advanced Photoshop 



TECHNIQUE 

Circular elements 
in Photoshop 

Many designers will turn to Photoshop to 
create their circular elements. The most 
prominent use can be seen as portals in 
your webpages; be it as information 
buttons to new pages, or image 
thumbnails to access portfolio images. 
Photoshop, pre-CS6, offers highly 
capable ways to create and style such 
assets. Of course, there are some better 
practices to maximise the ability to make 
further tweaks, which we explain here. 



Smart Object 

I Most will use the Ellipse (Shape) 
tool, but constant resizing will pixelate. To 
stop this set to a large size, Ctrl+click your 
shape layer, selecting Smart Object. Now 
resizing down has no adverse effect. 



Clipping Mask 

You should attach images in the 
Smart Object interface (double-click layer) 
before decreasing size. Place your image 
over your shape, Cmd+click the shape 
thumbnail, applying a Layer Mask. 




Layer Style 

To style, apply from the 
Layer>Layer Style options to your masked 
image layer after resizing, hiding your 
shape layer. Add effects to your shape, or 
colour washes to your thumbnail image. 
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Circular web design trends 




Drawing effects 

A fun and playful 
animation that links all 
the work together. 
Ideas travel from one 
project to another 
(lines) and come from 
various inspiration 
sources (particles). 


Work thumbnails 

They work like small 
planets attracting 
inspiration particles 
to create a unique idea 


audcman piguot 


knit modernity cwnts 




Enforced viewing 

The main goal behind the 
simplistic interface (through 
circular elements) of dotmick. 
com is to expose the designer’s 
work as much as possible. 
Simple circular portals enforce 
your focus, which is 
advantageous when 
considering many visitors will 
look only for a matter of 
minutes, even less. Everything 
is visible in a comfortable, 
forthright manner. 


INSPIRATION 

Vlog.it 


Vlog.it is an intuitive interactive wheel that 
shares a collection of designer Marco 
Rosella’s favourite online videos. The 
design here clearly endorses the use of 
circular elements as crop thumbnails. This 
site is powered by SVG, which Rosella 
believes is great for “interactive circular 
graphic elements and for image 
cropping”. He also endorses CSS3, saying: 
“with simple instructions like border- 
radius: 50em; you can replace in one line 
hours of exporting of transparent PNGs. 



TECHNIQUE 

New Photoshop 
CS6 shape tools 

The latest edition of Photoshop has improved 
the capabilities for resizing and styling web 
icons, especially the circular variety. Here we 
present some of the coolest automated 
options, all housed in a single layer. 



Photoshop CS6 has now been 
modified with full vector support through its 
Shape tool. This means Smart Objects are no 
longer necessary to resize circular elements, 
but still a good idea when clipping imagery. 



New Shape outlines 

You can now apply even more 
outline styles directly from the CS6 Shape 
menu with the Stroke options. This includes 
dashed and dotted lines, and sizing and 
colour. Resize, and the line style is reset. 



New Fill option 

Want to add a gradient to your 
shape? No problem as the CS6 Shape tool 
now has a Fill setting that lets you add this 
directly to the shape. Now simply clip shapes 
with Color blending modes. 
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01 

02 

03 

Left-hand page 


13 

14 

15 

Uiglit-liaiid page 


04 

05 

06 

1. www.poundandgrain.com 

2 . www.peckandco.com 

7 . www.madfest.nl 

8 . piccsy.com/everything-design 

16 

17 

18 

13 . www.publichouselv.com 

14 . www.christinelingerie.com 

19 . www.szdravkov.com 

20 . www.oncarbure.com 

07 

08 

09 

3 . www.cascadebreweryco.com.au 

4 . www.stationstreetpgh.com 

9 . www.stopatnever.com 

10 . www.thinkfresh.net.au 

19 

20 

21 

15 . www.amirkhanworld.com 

16 . wwwmediacontrol.nl 

21 . www.artistoftheyear.ca 

22 . www.ultranoir.com 

10 

11 

12 

5. www.griplimited.com 

6 . www.austineastciders.com 

11. www.tenandahalf.net 

12 . www.castirondesisn.com 

22 

23 

24 

17 . www.johanreinhold.com 

18 . www.bluecadet.com 

23 . www.souppeddler.com 

24 . www.sidewalkland.com 
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The term UX covers a broad range of subjects. How 
would you describe UX to designers and developers 
who have a limited, or no, knowledge of the subject? 

One of the problems with user experience is that it's not 
one thing, but many things. 

At its most basic level it’s the way a person perceives 
a product or service, eg “that was a terrible experience.” 
Because of this, it’s also the natural output of the design 
process; it’s unsurprising we’ve started to see designers 
calling themselves user experience designers, because 
what they do has an effect on the user experience. 

However, when I talk about user experience design 
or the user experience community. I'm using it to 
describe a fairly well known field of practice that has it’s 
roots in the world of human-computer interaction and 
covers disciplines and activities like design research, 
usability, information architecture and interaction 
design. So true user experience designers are those 
with a deep knowledge in these particular areas. 

Q. The first step to a successful UX project lies in the 
planning. What are the five essential steps that a 
designer/developer should consider at this stage? 

I’m not sure I’d agree that the first step to a successful 
UX project lies in the planning - unless you’re arguing 
that the whole user experience design process is a form 
of active planning, or planning through doing. For me 
the five essential considerations would be: 

• Too much planning doesn’t allow for flexibility. Set 
time-boxes and let the last activity inform the next. 

• Don’t make decisions until you have enough 
information to base them upon. 

• Don’t settle on a solution too early. Always allow time 
for exploration and synthesis. 

• Involve domain experts as much as possible. Try to 
run collaborative workshops and consider cross¬ 
functional paring. UX is a team game and isn’t owned 
by one person. 

• Always be sceptical of your solutions and test your 
assumptions wherever possible. 

Q. At the planning stage, what tools and personnel 
should ideally be involved? 

At the planning stage you should gather input from as 
many people as necessary to build a coherent picture. 
Similarly, you should use the most efficient tools at your 
disposal to gain the insights you’re looking for. 

Typically we’ll have a small project team comprising 
of a user experience designer, a graphic designer or Ul 
designer, and a front-end developer. We’ll talk to users, 
clients and important stakeholders. So these could 


include folks from the analytics team, the marketing 
department, the tech team, SEO or customer service. 

As for tools, we set up surveys, run interviews, organise 
collaborative design workshops and whatever else we 
need to get the information we’re looking for. 

Q. When evaluating a new project, are all the various 
guises of a site, ie desktop, phone and tablet, 
considered as a whole or are they all given 
individual attention? 

In an ideal world, companies would create a holistic 
user experience across all of their customer interaction 
points. However, due to the size and complexity of most 
businesses, products tend to get siloed and tackled on 
an individual basis. This lack of consistency is one of the 
biggest challenges facing user experience right now. 

Q. When planning and evaluating a new project, how 
much input or influence does the client have in the 
creative process? 

I don’t believe in the old fashioned notion of the 
creative genius locking themselves away for months 


before magicking up the perfect solution. It’s a romantic 
idea - but not an especially helpful one. Modern design 
is an inclusive process and today’s designer is more of a 
design facilitator than a creative demigod. 

When I hear designers complaining about their 
clients it’s often their fault. They have failed to explain 
the process, set proper boundaries and managed client 
expectations. Consequently, if the client doesn’t feel that 
the agency is in control, it’s their natural instinct to try 
and be helpful and start directing the process. 

Rather than thinking of your clients as blockers that 
get in the way of your design genius, it’s important to 
realise that they probably have a better understanding 
of their business and their customers than you do. As 
such, close collaboration is key. So you need to engage 
with your clients from day one and use them as an 
important resource to draw upon. 

This doesn't mean that they should drive the project. 
After all, you’re the professional and have done this 
hundreds of times before. Instead you have to create a 
structure that draws the best from your client while still 
remaining firmly in control of the design process. So ask 
them questions, involve them in workshops and draw 
on their experience as much as possible. 

Q. The purpose of rebuilding/rebranding a site is to 
finish up a better product. How much attention is 
paid to competitor sites and how much of an 
influence will it have on the outcome of a project? 

I guess that depends on your term ’better’. Often a 
rebrand doesn’t result in a markedly better product. 


Modem design is an inclusive 
process and today’s designer is a 
facilitator, not a creative demigod 

74_feature 














7 


Lj 






»j :ci i 




u Seriously, I’m fundamentally 
against the idea of showing multiple 
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LONDON 


When we set up UX London in 2009, user 
experience was still a relatively new discipline in the 
UK. So we invited some of the best known thinkers, 
speakers and practitioners to share their learnings 
with this growing community. People like Don 
Norman, Jared Spool and Jeff Veen. Wanting to 
improve the quality of user experience in the UK, 
the event was designed to have a very practical 
focus, being made up predominately of hands on 
skills workshops. 

As a lot of the original thinking around User 
Experience was happening in America, you’d 
typically have to fly to the States to attend a UX 
event. So we wanted to close the gap and give 
people in the UX and Europe access to some of 
these ideas. However, this lead to an inevitable US 
bias in our program. 

Jump ahead four years and the UX industry in 
Europe is booming. We have conferences and 
events popping up all over the place, and 
companies can’t find talent fast enough. So much 
so that many of our US colleagues feel that Europe 
is now leading the pack. With this in mind we’re 
looking to re-invent UX London for 2013. 

We believe it’s time to stop looking over the 
pond for inspiration and focus on the amazing 
talent we have in our own back yard. We also 
believe that it’s time to move away from basic skills 
training and start to push the boundary with UX 
thinking in Europe. We’re really excited with where 
we’ll be taking UX London next year and we hope 
you will be to! 



Instead it will shift the company’s marketing effort in a 
different direction. But I digress. 

In terms of user experience, looking at competitors is 
a useful way of seeing what works and what doesn’t. 
More importantly it’s a great way of spotting gaps in the 
market. So, see what things your competitors aren’t 
currently doing that you could capitalise on. 

Q. After evaluating and planning, the next step 
designing. A critical element of a user’s experience is 
navigation. How much emphasis is placed on 
ensuring the right structure is in place and what are 
your golden rules for creating a navigation system? 
As I mentioned earlier, you could argue that design is a 
form of active planning, of turning a vague concept into 
something more tangible. So I don’t see the cut-off quite 
as well defined as you. 

Information architecture is a key part of the user 
experience process and is all about defining structures. 
It’s also a form of design, albeit a more abstract one. So 
I would say that ensuring a good structure was a key 
component of user experience. 

As for golden rules, I’m afraid there are none. Instead, 
good designers will come up with hypothesis based on 
the information they have gathered and their past 
experiences, then test these to see if they pan out. 

Q. How does the design process evolve, and how 
much of a completed project is attributed to the 
physical design process? 

Good design is always an evolutionary process; a 
constant refinement towards some optimal solution. 
Good design is also a negotiation between competing 
pressures. So instead of a single perfect solution it’s 
more like a spectrum or opportunity space. 

As for how much of a project is attributed to the 
physical design process, I’m really not sure what you 
mean by this. Everything you do from accepting the 
project to launching it is part of the design process. 


Q. Typically, how many designs are presented to a 
client and how many amendments are made before 
reaching a final version? 

We have an incredibly complicated formula that factors 
in the number of stakeholders, the overall budget, the 
expected value of the outcome, the particular season 
and time of year, and the rotational movement of the 
earth to output the optimal number of design 
variations. Sadly, it’s patented or I’d happily share it with 
your audience. 

Seriously. I’m fundamentally against the idea of 
showing multiple different designs. It turns the process 
into a beauty contest. We may create a variety of 
explorations for ourselves, but will usually show the 
client just one core concept. 

We normally start with something pretty basic. Just 
spending a day or two sketching out the general 
direction. This is meant to provoke discussion rather 
than get to a quick solution. We’ll take the feedback on 
board and keep iterating until we reach a perfect 
composition. So sometimes we may get there in two or 
three iterations, other times it could be ten or 20. The 
limiting factor is the amount of time we’ve allocated to 
the design process, rather than an arbitrary number of 
concepts or iterations. 

Q. Once a project is completed and handed over to a 
client, is this the final act for the project team? Or will 
they have a continuing commitment and involvement 
in a project? 

The launch of a new product should ideally be the start 
of the process rather than the end. However all clients 
and projects are different. Sometimes clients use 
Clearleft to conceive a new product and then take the 
ongoing development in house. At other times, clients 
are looking for ongoing support and advice. So, it 
depends on a variety of things like the needs of the 
organisation, the maturity of their team and the 
business context they find themselves in. 
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t’s no secret that Twitter has a huge footprint 
on the web. It is estimated that a news story 
will break on Twitter up to 15 minutes before it 
is picked up by standard news outlets. With 
stats like that, you would be nuts to not have 
some form of Twitter integration on your site. 

Well run you through the basics of 
accessing the raw data that powers Twitter, 
and show you how you can manipulate it to add some 
great Twitter features to your website or blog. Well 
show you how to display a list of your own tweets and 
even build an app that tells you if someone is following 


you or not. We'll then add another layer to the app that will 
allow you to give away a piece of free content from your 
website to users that follow you on Twitter. If they don’t 
already follow you, they'll have the option to follow you 
and claim their prize. 

This feature assumes that you have a basic 
understanding of the PHP coding language, and that you 
have a PHP development environment set up either on 
your own localhost or as part of your web hosting 
package. It also assumes that you have a working 
understanding of CSS and can manipulate div elements to 
suit your requirements. 
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Above: Our finished PHP code interprets the raw data from Twitter, and makes it more readable 


Basic List of Tweets 

The first thing we’ll do is pull in a list of the last 20 
tweets a particular user has posted. It’s worth having a 
read of the Twitter API documentation to see what 
you can and can’t do when using the Twitter API 
without authentication. The documentation can be 
found at dev.twitter.com/docs. 

In this article well be focusing on the REST API, 
which is the nuts and bolts of Twitter. If you have an 
authenticated session you can recreate any part of 
Twitter on your website, from posting status updates to 
a full inbox system. Hopefully by the end of this article, 
you will have enough knowledge of the Twitter API to 
create a fully integrated Twitter experience, but for the 
time being well look at the basics of getting connected. 
Once you’ve had a quick look at the Twitter API 
documentation, navigate to bit.ly/LtITUp. 

You’ll see a large block of text that probably won’t 
make too much sense in its current format, but what we 
have here are the building blocks for most Twitter apps, 
specifically, we have the last two tweets published by 
@WebDesignerMag and all the associated meta data 
that goes with it. 

You can pick and choose what aspects of data you 
use out of this, but the two most common elements to 
display on your website would be [‘text’]; the actual 
tweet itself and [‘created_at ’],- the time that the tweet 
was posted. You can of course add more, for example, 
you could include [‘source’] which displays how the 
tweet was posted. 

So now we have the raw data, we need to do a bit of 
PHP coding to interpret it. Before we do that let’s 
modify the URL that well be pulling the data from. Well 
break it down into chunks so you can see how each of 
the variables affects our data. 


001 https://api.twitter.com/l/statuses/ 
user_timeline.json? 

This is the API server and the script that we will be 
pointing to, nothing to change here. 

001 include_entities=true 

This adds more information about the tweets in our 
data, and includes users that have been mentioned, 
hashtags, and other bits. If you don’t plan on using any 
of this data, it is best to set this variable to ’false’. 

001 &include_rts=true 

This option will allow you to include a user’s retweets in 
the feed. Setting this to false will only return tweets that 
the user has written themselves. 


001 &screen_name=webdesignermag 

This piece of code here is the username of the person 
whose tweets you want to display, you can set 
dynamically using a form field and the $_GET option in 
PHP. 

001 &count=2 

This variable sets the number of Tweets to return, 
change this to 20, but note that a high number here 
may cause your script to load slowly. 

Now we have our URL sorted out, we can add the 
PHP to output the tweets, the following step-by-step 
guides will give you snippets of code to add to your 
PHP page. The final outcome will be a more readable 
version of the Twitter raw data. We will add to this later 
on, to show more information in our tweets. 
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Interpret the data with PHP 

Here well show you how to take your Twitter API URL and output just the Tweets 

Pull in the data 


\ 


This single (if rather lengthy) line of code allows 
us to connect to the Twitter API server, obtain the 
information we need - the last 20 tweets from the 
specified user - and decode the JSON data. The next 
step is for us to create a loop that sorts this data into an 
ordered list. 


001 $feed = json_decode(file_get_ 
contents(*https://api.twitter.com/1/ 
statuses/user_timeline.json?include_ 
entities=true&include_rts=true&screen_name=webd 
esignermag&count=20’)); 


The loop 

Below the previous step, add the following code. 
The code we have here loops through the raw data and 
outputs the Tweet text, we have the preg_replace 
function in place, ready to accept the URL pattern and 
replace it with clickable links. The $pattern and $replace 
variables will be defined in the next step. 


001 <ol><? 

002 foreach($feed as Soutput) { 

003 echo ‘<li>’; 

004 echo preg_replace($pattern,$replace,$outp 
ut->text); 

005 echo ‘</li>’; 

006 } 

007 ?> 



Spattern and $replace 

This small section of code needs to be placed 
before your loop code. All we are doing here is letting 
PHP know what we are searching for, and what to 
replace it with. The pattern variable may seem a bit 
odd, so have a read of uk.php.net/preg-replace to find 
out what’s going on. 


001 Spattern = “/http:\/\/(www\.)?([ A .]+\. 
[\\s]+\.?[\\s]*)/i”; 

002 Sreplace = “<a href=’http://\\l\\2’>ht 
tp://\\l\\2</a>”; 


















Top tips for 
developing 
with Twitter 

Pete Simmons, digital marketing 
manager for Lionhead Studios 
gives us his top tips for working 
with the Twitter API 


The benefit of Includes 

PHP Includes are a great way to keep your code neat, 
placing your common functions in a different file, you 
are able to reference them with very little code. 


The preg_replace function 

The pregjeplace function in PHP is a handy way of 
finding a pattern of text and replacing it with 
something else. Here we are searching for any URLs 
and making them clickable. 


Double the dynamic URL 

You can add a second input field to your form and 
make the second Twitter username dynamic, allowing 
you to check the relationship of two people, rather 
than one against a set account. 


Twitter OAuth Authentication 

Some commands in the Twitter API require you to 
authorise a user via OAuth. There are plenty of 
premade authentication classes on the internet. A 
Google search will get you up and running in no time. 


PHP Includes are a great 



way to keep your code 
small and neat if 
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GETTING TO KNOW THE TWITTER API 


Adding more information 

Now we have our list of tweets, we'll add a bit more 
information to them. Well be creating a function in 
PHP that will allow us to display a posted [xx] minutes 
ago style timestamp, as well as where the tweet was 
made from. 

First thing we need to address is the fact that the 
URLs are clickable, but hashtags and mentions are not. 
While we’re addressing this problem, well tidy up our 
code. It is best to put our functions in a separate PHP 
file, and call them as an include. If you are unfamiliar 
with this technique, have a read of 
www.w3schools.com/php/php_includes.asp, which will 
give you a better insight. 

A function.php script has been created which will 
loop through the entity data and pull out any mentions 
and hashtags, it will then turn them into clickable URLs 
that will display a hashtag search result or user profile, 
respectively. This is quite a lengthy script so go ahead 
and download it from pastebin.com/KCY5tCvf. Once 
copied, create a new PHP document and paste it in. 
Save this file as ‘functions.php’ in the same folder as the 
rest of your script. If you now add <?php require 
‘functions.php’; ?> at the top of your main script, you will 
have access to your new function. If you use the require 
variable, rather than include, you will ensure that the 
script will stop on a problem with the function file, 
instead of carrying on and issuing a warning. 

Now we have our function script in place, and have 
access to the functions included within, we can clean up 
our previous code. You can now remove the preg_ 
replace, Spattern and $replace elements from your 
code. With the old functions removed, you can call the 
new function by adding the following code: linkify_ 
text($output->text, $output);. The code will pass in two 
variables, the first is the text of the actual tweet, and the 
second is the rest of the tweet data, including all of our 
entity data. 

If you now run the script, you’ll see a list of all tweets, 
with clickable mentions and hashtags. The next thing 
well do is call another function from our functions.php. 


which will display how long ago the tweet was made. 
Alter your output code to the following: 

001 echo linkify_text($output- 
>text, Soutput). ‘ posted 

‘. TimeSince(strtotime($output->created_at)). ‘ 
ago.’; 

Running the script now will show the tweet, links and a 
nicely formatted TimeSince text. The next thing to do is 
add information about where the tweet came from. 

To add he source of the tweet, change your output 
line to the following: 

001 echo linkify_text($output- 
>text, Soutput). ‘ posted 

‘. TimeSince(strtotime($output->created_at)). ‘ 
ago via ‘. $output->source .’.’; 

The source will now be displayed. We do not need to 
call out linkify function, as the source variable contains 
pre-formatted HTML. You will notice that if a tweet was 
published via twitter.com, the source will simply read 
‘web’, whereas if a third-party app was used a link will be 
created to that third party website. 

Getting your relationship status 

Well move on from the basic list of tweets to something 
a bit more advanced now. Well use the REST API to find 
out if a user follows you or not. Create a new PHP 
document and add the following code under the 
<body> tag: 

001 <form action=”check.php” method=”get”> 

002 Twitter Username: cinput type=”text” 
value-’” id=”user” name=”user” /> 

003 <input type=”submit” value-’Check >” /> 

004 </form> 

Save your PHP file as ‘check.php’. If you run this page 
now, you’ll see a^prwrwITH amnpuT box aj^l submit 


button; this will act as a way for us to check the 
username against our target Twitter account. 

The next step is to add the PHP underneath our form 
so that we can process the form data. Add the following 
line to connect to the Twitter API using a dynamic URL: 

001 <?php 

002 if (isset($_GET[‘user’])) { 

003 $TW_user = $_GET[‘user’]; 

004 $feed = file_get_ 

contents(‘https://api.twitter.com/1/ 
friendships/exists.json?screen_name_a=’.$TW_ 
user.’&screen_name_b=webdesignermag’); 

005 } 

006 ?> 


Twiner Username 

Check > 

Yes they do 


Twitter Username 

Chock > 

Nope' 



Above: Here we have the output of our PHP checker. You can alter 
the text to anything you like 


We are using the same method as before to connect 
to the Twitter API, but this time we are going to be 
adding a variable into the URL. This variable will be set 
from our form. By placing the entire PHP script within 
an isset condition, we avoid getting any errors when we 
run the page before completing the form. All code that 
we add from here on will need to be added before the 
closing curly bracket (“}”) to avoid springing any 
unwanted errors. 

Now we have our dynamic URL in place we need to 
do something with it. Underneath our dynamic URL 
well add an if statement that checks the result. The 
result that we get back from pinging the dynamic URL 
will be either true or false. Knowing this, all we need to 
do is check for the presence of the word’true’, this can 
be done via the following code: 


1 If you love 2 WcbDcsyuictMag #FF gjB ooks Im agine iSimaginesubs ^lgrobot gjvnpwyourappa gsp accanswcts @Lumx UserMa g posted 5 days ago via web 

2 Want to win a £ 150 telescope to gaze into space'* Check out this competition on the All About Space website spaceanswers com competitions w posted 5 days. IS hours ago via web 

3. Web Designer is on sale today. Get to the shops or go to *sucatdi£italinngs to get your digital copy imagine pub lishing co uk gi catdigitalma posted 5 days. 22 hours ago via web. 

H 4 Blog Web Designer 198 now on sale The latest issue of Web Designer is packed with the usual mixture of great ti nvui l com 6 o4f?fs posted 6 days. 1 hour ago via twitter feed 

5. The web designer s 101 winners Congratulations to the following lucks' winners Steven Barman Micheal Nlazzamuto . bit ly/N4c74W posted 6 days. 10 hours ago via twrttcrfecd . 

6 Blog The web designer s 101 winnets Congratulations to the following lucky winners Steven Barman Micheal Maz Unvu il co m 7 uy 4csa posted 1 week ago via m ittr tfeed 

7 ^Safari and g tPad Is there an alternative browser for the iPad 1 * And, is it any good posted 1 week ago via web 

8 “TTLP If you could afford a top level domain what name would you use buy? posted 1 week ago via web 

9 gwebdesipnermag Get a digital copy' of Web Designer from ^ImaginePublishing ’s supersite lmapme-publishing co uk'greatdigitalma posted 1 week. 1 day ago via web 

10 "iPad Do vou use a different browser to Safari Which one do you use and why'* posted 1 week. 6 days ago via web. 

11 *gtcatdigitalmaps *webdesignermag Get the digital version of Web Designer on PC. Mac. iPad. iPhone. Android at imapme-pubhshinp co uk gteaidijntalma posted 2 weeks. 1 day ago via web 

12 dIE7 A big thumbs up to Kogan com in their bid to help nd the world of old browsers, bbc in/KXtOUC posted 2 weeks, 4 days ago via web 

13 “Twitter aface hoo k Twiner or facebook^ Which is vour preferred platform and why? Yes we do understand the uony posted 2 weeks. 5 days ago via web 

14 «TwitterAPI Tell us about your favourite twiner apps or miner apps you are gomg to build posted 2 weeks, 5 days ago via web 

15. *grea tdigrt almag s Get Web Designer on PC. Mac. iPad. iPhone. Android al i mag ine-publishing co uk gicatdigitalma posted 2 weeks, 5 days ago via web 
^ 16 Get great digital mags' The definitive guide for digital creatives, Web Designer magazine, is now available to bit tv/LV9ztl posted 2 weeks. 6 days ago via miner feed 

17. Blog. Get great digital mags! The definitive guide for digital creatives, Web Designer magazine, is now availa... turyurl com/7ybtow6 posted 2 weeks. 6 days ago via twiner feed. 

18 Win The web desmger s 101 most important decisions The Web Designer s 101 Most Important Decisions is a book bit lyUjJK e posted 3 weeks ago via twmerfeed 

19 Blog Wm The web desinger's 101 most important decisions The Web Designer’s 101 Most Important Decisions is a... turyurl com/7tuqsca posted 3 weeks ago via twmerfeed . 

20 Build a responsive unage slider with jQuery No matter what your proficiency, creating responsive designs can b bit ty LfrnqSR posted 3 weeks. 5 days ago via muter feed 


Above: Our script now pulls in the Tweet as well as all required meta data, including links 

; \ \ 
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001 if ($feed === ‘true’) { 

002 $TW_result = ‘Yes they do’; 

003 } 

004 else { 

005 $TW_result = ‘Nope!’; 

006 } 

What the above code will also do, is set a variable with 
the appropriate response. From here we can simply 
print the results using an echo command, like so: 

001 echo $TW_result; 

If everything is coded correctly, you should be able to 
run the page without any errors for the first time, 
complete the form, and then have the page reload with 
a positive or negative response. Try it out with a few 
Twitter usernames that you know who do and don't 
follow you, to ensure that everything is working as it 
should be. 

From here we can expand our application and offer 
users a piece of digital content if they follow you. For 
those that are not following you yet, you can present 
them with a follow call to action, using the Twitter API. 

Giving away freebies! 

We have the groundwork for our Twitter app in place, 
now we just need to add the finishing touches. The first 
thing we'll focus on is rewarding our loyal Twitter 
followers with a piece of digital content. This can be 
anything you like, but for the purpose of this 
demonstration, we'll be revealing a link to the Twitter 
API documentation. Pretty sweet, right? 

This is a fairly easy change to make. All you need to 
do is change your true $TW_result variable to a 
hyperlink. This is done with the following code: 

001 $TW_result = ‘<a href=”https://dev. 
twitter.com/docs”>You follow us on Twitter, 
have a look at the Twitter API as a reward!</ 
a>’; 

It’s probably best to change this to something a bit 
more exciting. The next task on the list is to change our 
negative variable to display the Twitter follow prompt. 
To do this we'll be displaying a simple follow button. 
More information on the Twitter follow button, and how 
you can customise it to your needs, can be found at 
dev.twitter.com/docs/follow-button 


In PHP you are able to close the PHP tags, add HTML 
and reopen the PHP code from where you left off. This 
is a really good way of keeping your code readable, if 
you are using an editor like Dreamweaver, all of your 
code completion and syntax highlighting will work with 
HTML again, once you’ve closed off your PHP. A basic 
example looks like this: 

001 <?php if(some condition) { ?> 

002 <hl>Some standard HTML</hl> 

003 <? } else { ?> 

004 <h2>Some more standard HTML</h2> 

005 <? } ?> 

You can see that the PHP if statement carries on after 
the standard HTML has been rendered. With this in 
mind, you can change your negative $TW_result 
variable to the following: 

001 else { ?> 

002 <a href=”https://twitter.com/ 

webdesignermag” class=”twitter-follow-button” 
data-show-count=”false” data-lang=”en” data- 
size=”large”>Follow @webdesignermag</a> 

003 <script>!function(d,s,id){var 
js,fjs=d.getElementsByTagName(s)[0];if(!d. 
getElementById(id)){js=d.createElement(s);js. 
id=id;j s.src =, 7/platform.twitter.com/widgets. 
j s”;fj s.parentNode.insertBefore(j s,fj s);}} 
(document,"script”,”twitter-wjs”);</script> 

004 <? } 

You can see that we have actually removed the TW_ 
result variable. We can also remove it from the positive 
statement, ending the PHP code and switching back to 
HTML before and after the curly braces. You can also 
remove the echo command from the bottom of the 
code as well, as switching to standard HTML will output 
the relevant content automatically. 

One thing to note about the Twitter widget is that it 
detects an active Twitter login, meaning if you are 
logged on to Twitter and already follow the account you 
are checking, you will always get a grey box. The idea of 
the app is that a user who is logged in and follows you 
on Twitter will always get the positive answer to our if 
statement, and their free reward. A way around this, is 
to create a custom button with the API yourself. For the 
sake of this tutorial though, that would be excessive. 


Twitter Username: Check > 

You follow us on Twitter, have a look at the Twitter API as a reward! 

Above: Our completed app in the true state, offering the user a link to click 

Twitter Username: Check > 

V? Follow @webdesignermag 

Above: The app now in the false state, giving people the option to follow a user on Twitter 


Using CURL instead of 
file_get_contents 

file_get_contents with the API can 
be slow if you make multiple calls, 
curl will speed things up 

/jft Setting up curl 

Use phpinfoO; to check that your PHP set up 
supports curl, it is pretty standard in most setups, but 
older versions of PHP may run into problems. You can 
now go ahead and create a get_data function, which 
we will use to call a curl command multiple times. 


001 function get_data($url) { 

002 

003 } 


Finishing the function 

We can now add the rest of the curl code to our 
function. The code here will open up a supplied URL 
and return the contents based on variables we set. 
These variables allow us to control the timeout of the 
script: useful if you plan on getting a lot of data. 


001 function get_data($url) 

002 { 

003 $ch = curl_init(); 

004 $timeout = 5; 

005 curl_setopt($ch, CURLOPTJJRL, $url); 

006 curl_setopt($ch,CURLOPT_RETURNTRANSFER,1); 
007 curl_setopt($ch,CURLOPT_ 

CONNECTTIMEOUT,$timeout); 

008 $data = curl_exec($ch); 

009 curl_close($ch); 

010 return $data; 




011 } 
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Create an app 
using YahooFs 
new Mojito 
framework 

Continue to code an app with 
YahooFs new JavaScript framework 

tools I lech I trends JavaScript Mustache.js, Mojito, Node.js, currently 
Mojito will only run on *nix systems 
export Kieron Howard 



L ast month we took a look at the 
Mojito framework from Yahoo! 
Mojito is both a front and back-end 
framework written using JavaScript. 
The fact that both the server and 
client-side are JavaScript makes it 
very flexible and easy to blur the 
boundaries. Last time we built an 
app which pulled in a JSON feed 
and displayed it within the browser - this time we will 
look at how to implement some of the more advanced 
features. To begin, we will learn how to interface Node.js 
with MySQL and store and retrieve data from it within 
our application. We will also look at displaying different 
views dependent on the device that is requesting it, as 
well as how to store and retrieve cookies. Next we will 
take a look at dealing with POSTs from forms and how 
to handle those within the controller. Once you've done 
that it's then possible to pass them over to the model 
for storing within our database. Finally we will see how 
Mojito deals with global assets, to learn how to share 
common CSS and image files between Mojits. 


01 Install NodeMySQL 

For our database we will use MySQL, although Mongo would work fine. 
For Node to interact with MySQL we need to install this package into the root 
of the app with Node Package Manager (NPM). 

001 npm install mysql@2.0.0-alpha2e. 

Install MySQL 

Depending on your operating system, installing MySQL differs a little. 
For most Linux distros you can use sudo apt-get install mysql-server if its not 
already installed. Once that's done you can run it using sudo service mysql 
start. Changing the root password can be done using emysqladmin -u root 
password MYNEWPASSWORD. 

Create a new database 

We need a database. Enter 'mysqladmin -u root -p create testdb* to 
make a new database called testdb. You may have to enter your password. 

Modifying our model 

Open up the model.server.js file and replace the previous search 
function with the code below. This hooks into our mysql module and opens 
up a connection. Change the host if you aren’t running the server locally. 


001 

var mysql = requ1re('mysql'); 

002 

var connection = mysql.createConnection({ 

003 

host 

‘localhost', 

004 

user 

‘root’, 

005 

password 

‘mypassword’, 

006 

}); 



Perform a test query 

' The test query will return true regardless, but will prove that our 
MySQL connection is working as expected. Place this straight after our 
connection var. If you have any problems here, make sure MySQL is running, 


and that you installed the NodeMySQL module in the correct location. You 
should see in your server window ‘Query result: [ {T: T} ] ‘e 

001 connection.connect(); 

002 

003 connection.query(‘SELECT 1’, function(err, rows, fields) { 
004 if (err) throw err; 

005 

006 console.log(‘Query result: ‘, rows); 

007 }); 

008 

009 connection.end(); 

Add in our database 

We then need to tell our app which database to connect to. Enter the 
code underneath the connection details. You can also enter in ‘port’ for a 
different port or ‘debug: true’ to enter into debug mode. Once you have done 
that, restart the server to refresh the browser and check it all still works. 

001 database : ‘testdb' 

Writing to the database 

Now we can use common MySQL queries within our application to 
read and write from our database. These can be added to the model as 
required and called from any controller. Remember to make requests to the 
database separate from the controller and stored within the model. 

001 //Example SQL query 

002 INSERT INTO Cars 

003 VALUES (eNissan’, ‘Honda’, ‘Ford’); 

Create a table to write to 

Back in terminal create a new table by going into the mysql command 
line interface. If you prefer you can install PhpMyAdmin and use a browser 
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<Ab»ve> 

• Installation of the package is easy, as NPM resolves all dependencies. 
The more you use Node.js, the more you will grow to love NPM 


interface to manage your database, alternatively there are apps such as SQL 
Workbench or Sequel Pro. 

001 //enter mysql 

002 sudo mysql -u root -p 

003 //create table 

004 create table testtable ( car varchar(20) ); 

Creating specific views for devices 

Being able to serve out different views for different displays is 
becoming increasingly popular, what with phones having tall narrow screens, 
and desktops being considerably wider and shorter. Mojito makes it very easy 
to adjust your content to suit. Within your application.json file replace the code 
with the code below. 


001[ 

002 

{ 


003 

“settings”: 

[ “master” ], 

004 

“specs”: { 


005 

“device” 

: { 

006 

“type”: 

“device” 

007 

} 


008 

} 


009 

} 


010] 




Editing routing settings 

' Open up routes.json in your app and add in the following. This sets us 
up so when a get request is made to the app with the query string device 


then the response can be tailored to suit. This will then relay the request to the 
device controller we will create in a second. 

001 [ 

002 { 

003 “settings”: [ “master” ] , 

004 “_device_view”: { 

005 “verb”: [“get”], 

006 “path”: “/”, 

007 “call”: “device.index” 

008 } 

009 } 

010 ] 

Edit our controller 

Open up controller.server, and underneath out first method add in the 
code below. Note the NAME value that we pass to the device function which is 
obtained from our query string URL. The rest of the method is similar to the 
ones we created in the last tutorial. 

001 YUI.add(‘device’, function(Y,NAME) { 

002 Y.mojito.controllers[NAME] = { 

003 init: function(config) { 

004 this.config = config; 

005 }, 

006 

007 index: function(ac) { 

008 ac.done({title: ‘Device Views’}); 

009 } 
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010 }; 

011 }, ‘0.0.1’, {requires: []}); 

Add in the Android view 

Now create a new view called ‘/index.android.mu.htmr. This will be 
shown when ever the query string is ?device=android. Mojito also recognises 
/index.iphone.mu.html. /index.blackberry.mu.html and more. 

001 <html> 

002 <head> 

003 

004 </head> 

005 <body> 

006 <div id=”{{mojit_view_id}>” 

007 class=”mojit”> 

008 <h2>This is Android</h2> 

009 </div> 

010 </body> 

011 </html> 

Test it out 

You can test this out now by entering ‘http://localhost:8666/@ 
helloMojit/index?device=androidHYPERLINK “http://localhost:8666/@ 
helloMojit/index” http://localhost:8666/@helloMojit/index?device=android' into 
the browser. If you get any errors then check your server window to see what 
response you are getting. Make sure all your routing is configured properly 
and that your controller names are correct. 

Getting and setting cookies 

To get and set cookies to persist user settings then all we need to do is 
adjust our application.json to contain all the code below. We use the 
CookieMojit, which is extended from the HTMLFrameMojit. This allows Mojito 


to do all the hard work for us! 

001 [ 


002 

{ 


003 

“settings”: [ ‘ 

‘master” ], 

004 

“specs”: { 


005 

“frame”: { 


006 

“type”: “HTMLFrameMojit’ 

007 

“config”:{ 


008 

“child”: 

{ 

009 

“type”: 

“CookieMojit’ 

010 

} 


011 

} 


012 

} 


013 

} 


014 

} 


015 ] 


15 

Setting a cookie 


r Setting the cookie within the controller is done by adding in an action 
like below, the same as you have done before. This can then be called 
whenever you need to store some data such as login or message preferences 

001 YUI. add (‘CookieMojit:’, f unction (Y, NAME) { 

002 Y.mojito.controllers [NAME] = { 

003 init: function(config) { 

004 this.config = config; 

005 }, 


006 

007 } 

008 }; 

009 }, ‘0.0.1’, {requires: []}); 

Main Cookie Set 

Then we can add this to our CookieMojit action. As you can see, we 
just need to call the easy to remember cookie.get and cookie.set methods 
and supply them with a few parameters. Being able to perform fairly complex 
functions like this with so few lines highlights the power of the framework. 

001 index: function(actionContext) { 

002 var requestCookieValue = actionContext.cookie, 

get( ' request_cookie’); 

003 

004 actionContext.cookie.set("response_cookie", 

"Cookie has been set"); 

005 actionContext.done( 

006 { 

007 title: "This is a cookie. Yum”, 

008 request_cookie_value: requestCookieValue 

009 } 

010 ); 

Cookie in view 

f Displaying the request cookie within the view is a simple matter of 
using the normal Mustache double braces and then adding the variable 
‘request_cookie_value’. To show the response, cookie needs a few more lines 
of JavaScript as we shall see in the next 

001 {{request_cookie_value}} 

Response cookie 

To display the response cookie we need to add a little JavaScript to our 
view and include YUl.js. The code below will display a pop-up within the 
browser with our cookie response value. You could also just use jQuery to 
attach it to a DOM element rather than using an alert. 

001<script type=”text/JavaScript” src=”http:// yui. 

yahooapis.com/3.3.0/build/yui/yui-min.js”></ 
script> <script type=”text/JavaScript”>YUI().use(‘cookie’, 
‘node’, function(Y) { 

002 

003 Y.Cookie.set(‘request_cookie’, ‘request cookie 
value’); 

004 function showResponseCookie() { 

005 var responseCookieValue = Y.Cookie, 
get(‘response_cookie’); 

006 Y.log(‘RESPONSE COOKIE VALUE: ‘ + 
responseCookieValue); 

007 alert(‘Response Cookie Value: ‘ + 
responseCookieValue); 

008 } 

009 Y.on(‘domready’, showResponseCookie); 

010 }); 

011 </script> 

Reading POST values 

To be able to read values POSTed from a form is a common 
requirement for many web apps. To start off, set up a new function like below. 
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Notice we use the getFromBody method here, and then set up an 
empty array ready to store all our results into. 

001 index: function(actionContext) { 

002 var params = actionContext.params.getFromBody(), 
003 paramsArray = []; 

004 

005 

006 }, 

Pass POST values 

Now within that method we add in our main function to deal 
with the POST and then return them. This method loops over each of 
our items and then adds them to our paramsArray. Then we pass them 
out using our actionContent.doneO method. Again, this is a common 
task which without a framework can take quite a lot of effort to achieve. 

001 Y.Object.each(params, function(param, key) { 

002 paramsArray.push({key: key, value: param}); 

003 }); 

004 actionContext.done( 

005 { 

006 title: "Display POST values", 

007 params: paramsArray 

008 }, 

009 {name: 'index'} 

010 ); 

Dealing with assets 

To add assets such as CSS and images we can use Mojito's 
built-in functions. In our application.json we add in something similar to 
this. The code below defines our style and attaches an asset to it. In 
this case it’s style.css. By doing this, the asset is now available to use 
anywhere within our app without the need to explicitly include it. 


001 [ 



002 { 



003 

“settings”: [ 

“master” ], 

004 

“specs”: { 


005 

“style”: { 


006 

“type”: “ 

HTMLFrameMojit”, 

007 

“config”: 

{ 

008 

“deploy 

”: true, 

009 

“title” 

: “global assets”, 

010 

“child” 

: { 

011 

“type” 

: “Style” 

012 



013 

“assets 

{ 

014 

“top” 

: { 

015 

“css”: [ 

016 

“ 

/static/global_assets/assets/style. 

css” 



017 

] 


018 

} 


019 

} 


020 



021 

} 


022 

}, 


023 

“staticHandling”: { 

024 

“appName”: 

“global_assets” 


Code library 

Database connection code 

Sometimes we may need to use MySQL with Node.js. Luckily there is a 
module which does all the heavy lifting for us 

■« 001 YUI.add(‘helloMojit’, function(Y) { 

We set up the method as 
normal within Mojito 
using YUI.add, then by @@2 

declaring which Mojit 003 

we are using. Here its our . 

helloMojit we created 
last time. 005 

006 


Y.mojito.controller = { 
init: function(config) { 
this.config = config; 

}, 

index: function(ac) { 


This line includes our 
module that we installed 
earlier. We don’t need to 
perform any other 
configuration other to it 
than this. 


Looping over the array, 
we can reference the 
values to insert into the 
database by the array 
index number. 


007 var mysql = require(‘mysql’); 

008 var connection = mysql.createConnection({ 
009 host : ‘localhost’, 

010 user : ‘root’, 

011 password : ‘mypassword’, 

012 }); 

013 connection.connect(); 

014 connection.query(‘SELECT 1’, 

function(err, rows, fields) { 

015 if (err) throw err; 


Putting it all 
together 

Using all the elements 
covered within this tutorial, 
you can see how it is 
possible to quickly deploy 
quite complex apps, which 
due to the power of Node.js 
t can deal with a lot of input i 
and output. 


016 console.log(‘Query result: ‘, rows); 
017 }); 

018 connection.end(); 


019 } 

020 } 

021 }, ‘0.0.1’, {requires: []}); 


025 } 

026 } 

027 ] 

Add in the asset routes 

The routing file should include the style action and a request method for it. It’s then 
easy to include this within your view using something similar to ‘e /static/global_assets/assets/ 
style.css’. You could also use your controller to shorten this URI down a little. 

001 [ 

002 { 

003 “settings”: [ “master” ], 

004 “/”: { 

005 “call”: “style.index”, 

006 “path”: “/”, 

007 “verbs”: [“get”] 

008 } 

009 } 

010 ] 
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Check your 
PHP Code with 
CodeSniffer 

Ensure your code meets standard 
coding guidelines using the 
impressive PHP CodeSniffer tool 

tools I tecli I trends A code editor such as Dreamweaver, Sublime or 
Eclipse, PHP CodeSniffer, PEAR experts Matt Gifford 


C ode, like any language, is something 
that should be easily readable by 
those who can understand it, and 
ideally, it should still be vaguely 
understandable by anyone who isn’t 
fluent in all things ‘dev’. 

This stands particularly true as we 
all have our own way of writing - our 
own syntax, layouts and formatting preferences, and 
our own personal ticks and idiosyncrasies. This is 
normally easy to manage if working on your own, but 
as soon as you share code with a team of developers, 
each with their own style and way of doing things, it can 
get messy pretty quickly. 

In this tutorial we will take a look at PHP CodeSniffer, 
an open-source tool that uses a number of standard 
coding guidelines against which you can test your code. 
You can also extend it to create your own custom 
standard guidelines. May your code be formatted and 
indented to pixel perfection! 



Download PEAR 

PEAR is a framework and distribution system for reusable PHP 
components, and stands for PHP Extension and Application Repository, and 
PEAR will help us download and configure the CodeSniffer package. 
Download the PEAR phar (PHP archive). Using Terminal, navigate into your 
home directory and execute a curl request to download the required 
application archive files. 

001 sudo curl http://pear.php.net/go-pear.phar > go-pear.phar 

PEAR installation 

With the .phar package downloaded into your home directory, you 
now need to run the go-pear.phar script to complete the PEAR package 
installation process. The installation will display some install locations and 
config settings. Choose 1 to change the installation base setting to /usr/local/ 
pear and press Enter to complete the procedure. 

001> sudo php q go-pear.phar 

PHP configuration 

With the PEAR library downloaded and installed on your machine, we 
finally need to edit the php.ini configuration file to include a path reference to 
the PEAR libraries. Use the Terminal app to navigate to the .ini file and use a 
command line editor to include the following line to reference the library: 

001 > sudo vl /etc/php.ini 

002 include_path = “.:/usr/local/pear/share/pear” 

Path Variable 

The PEAR package is now installed, but we have a long path name to 
reference when running pear commands in the Terminal. Edit your bash 
profile file, and add the ‘export PATH' line to the bottom to add an 
environment variable to allow us to access PEAR without typing the complete 
directory location: 

001 > sudo vi ~/.bash_profile 

002 export PATH=/usr/local/pear/bin:$PATH 


05 Install CodeSniffer 

H With PEAR installed, we can now download the CodeSniffer tool. 
Thankfully, PEAR makes this really easy for us. We simply need to type the 
following command into a Terminal window, and PEAR will download a copy 
of the application from its repository. 

001 > sudo pear install PHP_CodeSniffer 

Helping hands 

We’ll be running the CodeSniffer tool from a command line, so how do 
we find out what commands we can pass to it? Open a Terminal window and 
navigate to the location of your PHP webroot. Once inside the directory simply 
type in the shortcode command for CodeSniffer and hit enter to bring up the 
available commands. 

001 phpcs —help 

First Test 

Go ahead and extract the sample files from the resource disc and 
place them directly in your PHP webroot. Let’s run our first test on the entire 
directory, although we could specifically choose to test individual files if we 
wished. With Terminal open and in the webroot directory, call CodeSniffer to 
test the current directory. 

001 > phpcs ./ 

08 FaMure 

Our sample file failed the default sniff tests for code layout, hinting and 
commenting standards. CodeSniffer will output a detailed level of information 
for each failure on a file-by-file basis, line-by-line, offering you the solution to 
remedy the errors and to ensure your code passes the tests. 

001 FILE: /Websites/phptest/WebDesMag.php 

002 - 

004 FOUND 2 ERROR(S) AFFECTING 2 LINE(S) 

005 - 

006 10 | ERROR | @author tag comment indented incorrectly; 
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expected 

007 3 spaces but 

008 | | found 4 

009 12 | ERROR | @link tag comment indented incorrectly; expected 
5 spaces but 

010 | | found 6 

011 - 

Extra detail 

The initial response from CodeSniffer tells us what's wrong, and on 
which line, in which document, which is great - and incredibly useful. We can, 
however, ask for more specific details through reporting options. Well use one 
of the report options to include the source codes. Run the check again with 
the optional -s parameter: 

001 > phpcs s ./ 

002 

003 FILE: /Websites/phptest/WebDesMag.php 

004 - 

005 FOUND 2 ERROR(S) AFFECTING 2 LINE(S) 

006 - 

007 10 | ERROR | @author tag comment indented incorrectly; 
expected 3 spaces but 

008 | | found 4 (PEAR.Commenting.FileComment.Taglndent) 

009 12 | ERROR | @link tag comment indented incorrectly; expected 
5 spaces but 

010 | | found 6 (PEAR.Commenting.FileComment.Taglndent) 

0H- 


€€ As soon as you share code with 
developers, it can get messy W 

Finding issues 

In this instance the fix is quite simple. The particular sniff tests we ran 
are quite strict on the spacing of tag comments. Open up the file WebDesMag. 
php and take a look at the top of the document to find the ©author and @link 
comments, which have one extra space compared to the others. 

001 * @category PHP 

002 * @package Web_Des_Mag 

003 * @author Matt Gifford <myemail@mydomain.com> 

004 * @license Enter a valid license here 

005 * @link http://dev.monkeh.local/WebDes_Sniffer 

006 */ 

Fixing problems 

Remove the two extra spaces in the file (one for each of the 
problematic tag comments). This should bring the comments in line with the 
rest in the same comment block. Run the test again and you should now see 
nothing returned in the console, which is a good sign. 

Changing standards 

' CodeSniffer comes prepackaged with a number of coding standards 
that we can use to perform the tests. Each one is tailored with slightly different 
tests and requirements for code. By default, the PEAR standard will be used. 
We can see what standards are installed and select a new default for testing. 
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001 > phpcs -i 

002 The installed coding standards are MySource, PEAR, PHPCS, 
Squiz and Zend 

003 > phpcs —config-set default_standard PHPCS 

Reporting format 

When we ran our previous tests in the last few steps we received a 
fairly simplistic report from the sniff tests, which was run by default. What 
we can do this time is set another configuration value to change the default 
reporting style we want to use. Let's change it to return detail using the 
summary format, which will provide us with the source for each error in a 
separate table. 

001 > phpcs —config-set report_format=summary 

Watching progress 

The CodeSniffer tool, as you have seen, will output the results of any 
errors or warnings at the end of its cycle through the code. We can change 
this to show us what's happening and has been discovered as it runs through 
the code. To do so, simply change another configuration value via the 
command line. 

001 > phpcs —config-set show_progress 1 

Custom standards 

As a tool to assist in coding guidelines, you can easily create your own 
coding standard to perform your own tests on your code. Each standard is a 
directory structure and an XML file containing test rule sets. Create the 
required directories for your custom standard within the CodeSniffer/ 
Standards directory.- 

001 > cd /path/to/PHP_CodeSniffer/CodeSniffer/Standards 

002 > mkdir MyStandard 

003 > mkdir MyStandard/Sniffs 


Create RuleSet 

‘ Now we need to create our rulesetxml file, which can be found 
residing in our custom standard directory. At its most basic, this file will 
inform CodeSniffer that it contains sniff tests that can be run, but we can also 
extend it to select which tests from other standards we wish to run as part of 
our guidelines. 

001 <?xml version=”l.0”?> 

002 <ruleset name=”MyStandard”> 

003 <description>Our new custom coding standard.</description> 
004 </ruleset> 

Adding rules 

Let’s add some of the existing standards in to our rulesetxml definition 
file for use in our tests. We can pick entire standards including all underlying 
tests but excluding some specific sniffs, and in some cases we can overwrite 
default values to customise the testing boundaries. 

001 <rule ref=”PEAR”/> 

002 <rule ref=”Squiz”> 

003 <exclude name=”Squiz.PHP.CommentedOutCode”/> 

004 </rule> 

005 <rule ref-’Generic.Files.LineLength”> 

006 <properties> 

007 <property name-’lineLimit” value=”90”/> 

008 <property name-’absoluteLineLimit” value=”100”/> 

009 </properties> 

010 </rule> 

New Sniff 

As well as importing existing sniff tests from other standards, we can 
create our own for use in our custom standard definition. Each sniff is located 
in a sub-directory that relates to its category or function. Create a new file 
called DisallowHashCommentsSniff.php in MyStandards/Sniff/Commenting. 
We can create the file comment block in the document. 
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001 /** 

002 * This sniff prohibits the use of Perl style hash comments. 
003 * 

004 * PHP version 5 
005 * 

006 * @category PHP 

007 * @package PHP_CodeSniffer 

008 * @author Matt Gifford <myemail@mydomain.com> 

009 * ©license http://matrix.squiz.net/developer/tools/php_cs/ 

licence BSD Licence 

010 * ©version SVN: $Id: coding-standard-tutorial.xml,v 1.9 

2008-10-09 15:16:47 cweiske Exp $ 

011 * ©link http://pear.php.net/package/PHP_CodeSniffer 
012 vax 


Register function 

Next we need to add the register method within the class, which allows 
the sniff to define which of the token types it wants to process in the test. 
When CodeSniffer encounters any of these while running the next sniff test, it 
will process the file and determine where that token type was found and 
inform us. 

001 public function register() 

002 { 

003 return array(T_COMMENT); 

004 }//end registerQ 


21 


Process function 

We're nearly there, but we now need to add the process function. This 
takes a representation of the current file being checked and the position in the 
stack where all of the tokens were found. This will check for the existence of 
the disallowed comment and generate the required error output message 
and stack information. 


19 


Define class 


Each sniff test needs to implement the PHP_CodeSniffer_Sniff interface 
to ensure that the correct libraries and packages are run when the tests are 
invoked. The class must also have a descriptive comment block above it for 
clear documentation and readability. 

001 class MyStandard_Sniffs_Commenting_DisallowHashComnentsSniff 
implements PHP_CodeSniffer_Sniff 


001 public function process(PHP_CodeSniffer_File 
SstackPtr) 

002 { 

003 $tokens = $phpcsFile->getTokens(); 

004 if ($tokens[$stackPtr][‘content’]{0} === ‘#’ 

005 $error = ‘Hash comments are prohibited; 

006 $data = array(trim($tokens[$stackPtr] 

[‘content’])); 

007 $phpcsFile->addError($error, SstackPtr, 

$data); 

008 } 

009 }//end processQ 


SphpcsFile, 


) ( 

found %s’; 


‘Found’, 
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Test File 

With our new sniff written in our custom standard, let’s 
create a simple PHP file to test the output of our sniff. This will 
contain a number of ’illegal’ hash comments, which our sniff 
will be looking for. Create this file in the PHP webroot directory 
in which we are checking. 

001 <?php 

002 

003 # This is a standard PHP file 

004 var $code_message = ‘Code should be readable.’; 

005 # Output our string message 

006 echo $code_message; 

007 
008 ?> 

Run sniffs 

With our test file in place, lets run CodeSniffer using our 
custom coding standard. We can either set it as the default 
standard or define it as an argument as part of the command 
line request. We’ll also set an optional parameter to obtain 
verbose output for more information. 

001 > phpcs -s -v —standard=MyStandard ./ 

Check output 

The addition of the verbose parameter gives us a 
greater level of understanding as to what is happening when 
CodeSniffer performs the tests. We can see from the output 
via the command line how quickly the sniff tests were 
performed and how many tokens were found in each file. 

001 Registering sniffs in MyStandard standard... DONE 
(1 sniffs registered) 

002 Creating file list... DONE (2 files in queue) 

003 Changing into directory /Websites/phptest 

004 Processing testfile.php [24 tokens in 8 lines]... 

DONE in < 1 second (2 errors, 0 warnings) 

005 Processing WebDesMag.php [107 tokens in 56 


Code library 

In Detail 

Let’s take a closer look at some of the techniques used by default sniff 
tests in CodeSniffer 


This particular sniff is 
currently searching for a 
number of token types 
within each of the 
processed files. 


001 public function process(PHP_CodeSniffer_ 
File SphpcsFile, SstackPtr) 

002 { 

003 $find = array( 

004 T_COMMENT, 

005 T_DOC_COMMENT, 

006 T_CLASS, 

007 T_FUNCTION, 

008 T_OPEN_TAG, 

009 ); 


To assist in formatting of 
code and readability for 
consistency, this sniff 
checks for additional 
blank line requirements. 


001 // Exactly one blank line before tags. 

002 Sparams = $this->commentParser- 

>getTagOrders(); 

if (count($params) > 1) { 

003 SnewlineSpan = $comment->getNewlineAfter(); 
if (SnewlineSpan != 2) { 

004 $error = ‘There must be exactly one blank 
line before the tags in function comment’; 

005 if ($long !== *’) { 

006 SnewlineCount += (substr_count($long, 

007 $phpcsFile->eolChar) - SnewlineSpan + 1); 

008 

009 } 

010 $phpcsFile->addError($error, 

011 (ScommentStart + SnewlineCount), 

012 ‘SpacingBeforeTags’); 

013 

014 Sshort = rtrim($short, SphpcsFile- 
>eolChar.’ ‘); 

015 } 

016 } 


lines]... DONE in < 1 second (1 errors, 0 warnings) 


Sniff success 

’ Our custom standard and sniff tests were processed 
against the files in the specified directory, and we can see from 
the results that the prohibited hash comments were found in 
our test file. We can now easily fix our code. 


CodeSniffer tests are 
thorough and can be very 
strict on the layout of 
code and the number of 
spaces between tokens. 


001 FILE: /Websites/phptest/testfile.php 

002 FOUND 2 ERROR(S) AFFECTING 2 LINE(S) 

003 - 

004 3 | ERROR | Hash comments are prohibited; found ( 

# This is a standard PHP file 

005 | | (MyStandard.Commenting. 

DisallowHashComments.Found) 

006 5 | ERROR | Hash comments are prohibited; found 

# Output our string message 

007 | | (MyStandard.Commenting. 

DisallowHashComments.Found) 

00 8 - 


Not just for PHP 

Although CodeSniffer 
is used primarily to 
test PHP files, you can 
use the tool to 
perform sniffs against 
XML and JavaScript 
files too. 


001 if (SspaceBeforeVar !== 1 && 
SspaceBeforeVar !== 10000 && 
SspaceBeforeComment !== 10000 ) { 

002 $error = ‘Expected 1 space after the 
longest type’; 

003 $this->currentFile->addError($error, 
SlongestType, 

004 ‘SpacingAfterLongType’); 

005 } 

006 

007 if (SspaceBeforeComment !== 1 && 
SspaceBeforeComment !== 10000 ) { 

008 

009 Serror = ‘Expected 1 space after the 
longest variable name’; 

010 Sthis->currentFile->addError(Serror, 
SlongestVar, 

011‘SpacingAfte rLongName’); 

012 
013 } 
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Championing the talents of 


Kris Jeary (Squiders) 

web www.squiders.com 



Currentrole Owner, designer & developer at Squiders Web Design 
Education Twelve years experience 
Expertise Hand coding, HTML, CSS, PHP, SQL, ASP.NET 
Clients Ralph Steadman, TopDogJobs, Maidstone Hockey 
Club, Kent County Council, O&L Hi-fi, lonzero, British 
Wireless for the Blind Fund 
Twitter @krisjeary 


Jeary stumbled into web design completely 
by accident some 14 years ago when 
presented with a PC in a job where there was 
little else to do than surf the - still young, - 
Internet. An artistic child that also had a love 
for logic puzzles, web design just made perfect 
sense to him. 

Six years on, and after a few jobs with web 
design agencies, he set up Squiders Web 
Design to remove the commuting from his life. 
2012 sees Squiders well-established and 
respected and doing business from his shed in 
the garden in Kent. 

A self-confessed coding snob, Jeary refuses 
to use Dreamweaver and hand codes all his 
sites in a basic HTML editor, which he feels 
gives him the freedom to design without the 


limitations of a toolbar. His design process 
involves first paper and pen, and then goes 
straight into the code, he tells us that his 
Photoshop skills are mostly non-existent. 

If there is a theme to his work it is one of 
captivating imagery with minimal amounts of 
text on a page, his belief that this leads to a 
more engaging experience for everyone is 
unshakable. As a standards lover he enjoys 
nothing more than experimenting with CSS 
and jQuery, as well as getting technical with 
SQL, PHP and ASP.NET. 

When he is not designing and developing 
websites, Kris likes to spend all his spare time 
with his wife and children, and has been known 
to take time off to watch the cricket at every 
available opportunity. 


01 

The site acts as a central hub for all of Mooli’s online social 
networks. It includes Integrated Flickr, YouTube, 
SoundCloud and Tumblr pages with a fullscreen video. 


05 

A recruitment site with a minimalist 
approach, and stock photos of people 
shaking hands are nowhere to be seen. 



02 

The site uses big 
background images to 
allow the visitor to get a 
taste of the care and love 
that goes into every 
single element of work. 

03 

A corporate site with 
added humour. The site 
uses characters based on 
lonzero's management 
and staff to add a more 
friendly and welcoming 
feel to the site. 

04 

This is a site for the 
legendary illustrator and 
cartoonist Ralph 
Steadman. The shop was 
written from the ground 
up and uses a minimalist 
approach to showcase 
the artist’s merchandise 
and memorabilia. 
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the independent and job-hungry web designers 



We are a Creative Catalyst, Designing 
& Building Meaningful Interactive 
Products for Brands 


WHY US? 



01 

So-Gnar was designed to 
represent cleanliness and 
simplicity. The 
three-column design is 
the site's call to action 
that easily informs the 
user of what is going and 
what the site has to offer. 


02 

The Game Medic site was designed 
around being a one-page site, using 
parallax scrolling and colours purposely 
implemented to catch a user's attention 
- depending on what section of the page 
they were visiting. The site was built using 
CSS3 and JavaScript so that the parallax 
effect could be accomplished. 


03 

The idea behind this site’s design was to give its readers a 'magazine-like' 
feeling. The design utilised dark colours, which contrast to put more 
emphasis on images and text. 


(TfcraSfl GNRR «« n* «■* •««»«: nn 



OJ www.so-qnar.com 

Matthew Stenquist 

web www.dig.ital.me 



Current role Student & web ninja 


Education Associates of Science degree in Game Production 
Expertise Word Press, Joomla, HTML, CSS3, JavaScript, PHP, AS3, 
Objective-C, Ruby on Rails, Photoshop CS6, After 
Effects CS5 


Clients So-Gnar, Devour-Bakery, Cathedral, Andrew Heard 
Twitter @MattStenquist 


Matthew Stenquist is a nineteen-year-old 
web designer and front-end developer 
fuelled by sunshine and jellybeans. He 

coined the term 'web ninja' because he is a 
jack of all trades - a web designer/developer 
and some-time independent game developer. 

He has been designing and developing 
websites since he was nine, and has had a 
fascination for science, technology, and game 
development ever since. Matthew started 
building sites through playing online games, 
setting up clan forums and various game sites. 

Later Matthew's obsession with gaming 
earned him a qualification in game design at 
18, and he is currently taking classes in 
Computer Science and Applied Mathematics. 


Matthew believes the most intriguing aspect 
of being a web designer is the ability to 
constantly adapt to new trends, design styles, 
techniques, and to never stay content. 

Much of his inspiration is drawn from 
experimental design using the latest 
technologies, video games, and the action 
sports industry. Matthew spent many of his 
years as an aspiring professional snowboarder 
where he was given the opportunity to master 
web design by building and designing sites for 
various sports brands at a young age. 

He currently resides in Los Angeles, CA. and 
Denver, CO., so his time is split between living 
in the bustling urban sprawl, and playing in the 
snow in the Rocky Mountains. 


04 

The idea behind Simple Games was to put an 
emphasis on the Apps, and to give the site an inviting 
and charming feel that would be engaging for users 
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Web talent showcase 



Steve Belovarich 

web stephenbelovarich.com 


■ Currentrole Freelance web designer/video pro 

Education MFA Computer Art Syracuse University / BS 
Electronic Art, Rensselaer 

Expertise HTML5, CSS3, jQuery, JavaScript PHP, Word Press, 
Photoshop 

Clients Tanja Maria Skincare, PRJCTS, Zodiac Baby, 
VivrantThings, Circa App 
Twitter @iplayitofflegit 


Steve Belovarich is an independent 
designer/developer based in Los Angeles, 

CA. He started writing HTML as a teenager in 
1997, then learned how to design and code 
interactive exhibits while studying Electronic 
Art at Rensselaer. At Syracuse University, he 
created the American Dream Machine, an 
ATM he hacked into a device that downloaded 
images from the Internet and figured out your 
American dream. He now focuses on 
commercial web design and video production, 
and is passionate about creative coding. 

Steve is a big proponent of open-source 
web technologies, and is very excited to see 
the industry move away from Flash. Steve has 
spent the last four years honing his abilities in 
HTML. CSS, JavaScript and PHP, and is 
expanding his skills to include HTML5 Canvas 


Drawing using three.js. He finds inspiration in 
clean, minimal and easy-to-navigate web apps. 

You will usually find him designing and 
developing HTML5 Websites, Word Press 
Themes and eCommerce templates. He also 
tweets and blogs about Web 3.0. Steve has 
recently created websites for the band 
PRJCTS, Zodiac Baby and Tanja Maria Skincare. 

Steve combines his video production and 
web design skills to animate objects with 
jQuery and CSS3. He offers an all-in-one 
creative solution for his clients. You can also 
find him helping out on a Hollywood set or in 
the editor’s seat cutting video with Final Cut 
Pro X. Steve has recently published his new 
portfolio online at stephenbelovarich.com, 
and is currently taking on freelance work while 
looking for a full-time job. 



O! &t£Bh£Db-elflyari£h^.om 


01 

The PRJCTS music group 
site makes great use of 
fullscreen HTML5 Video 
backgrounds to promote 
its product 


02 

Zodiac Baby uses a big 
central product image to 
instantly inform the user 
of the natural and organic 
products on offer. 


03 

Vivrant Things is a 
minimalistic WordPress 
theme that uses CSS3 
ribbons to add texture 
and depth to the menu. 


04 

The Tanja Maria skincare 
site is a simple and 
functional eCommerce 
design that concentrates 
on selling the products. 


05 

Belovarich's portfolio uses 
background images that 
enforce the skills on offer 
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DELIVER HI¬ 
RES IMAGES TO 
RETINA DISPLAY 

Discover how to serve high-resolution 
images to Retina display using CSS3 


PROFILE: 
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The award-winning Parisian 
studio with Disney, Samsung and 
Ubisoft in its portfolio share their 
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' Athens 

Searching for design deities in the city of Athena 
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The market has grown 
to realise the need for 
cutting-edge services 


V Red Design Consultants 

www.reddesianconsultants.com 

Red Design Consultants is the leading Greek 
branding company based in Athens, 
working passionately in the fields of marketing, 
communication, graphic, product, and 
environmental design. Creator of the emblem of 
2004 Athens Olympic Games, Red Design 
Consultants has won over 120 international 
awards for its services since 1992, having 
contributed to the development of major 
Greek and international brands with a 
worldwide profile. 



Athens is a vibrant cultural 
capital, thriving on its inherent 
antitheses and creating 
passionately despite the crisis 
striking the country. As the city 
has grown to host almost half of 
Greece’s population, it is 
inevitably the hive of talent and 
creativity that runs behind the 
Greek design industry. 


B ig agencies like the Red Design 
Consultants that paved the field a 
couple of decades ago keep setting the 
pace, while new agencies populate the 
scene, making Athens an exciting 
contemporary design hub. 

Over the past few years, many new creative 
agencies have sprung up as a younger 
generation of designers gradually enforce the 
Greek branding and design field, and the 
market has grown to realise the need for 
professional, cutting-edge services. Small- 
scale offices staffed by passionate and 
internationally 'bred' creators produce some 
distinctive work that stands out with 
originality, fuelled by the talent and the drive 
to bypass a rather unfriendly social, political 
and economic atmosphere due to the crisis 
ravaging the country - aiming to make the 
difference and create even more outstanding 
products that will equally address the local 
and the international networks. 

Greek clients are more than ever seeking 
high-quality platforms that create unique 
environments around their products and 
services, and are more than willing to 
embrace vanguard design, innovative ideas, 
technology and environment-friendly 
orientations, as well as to tap new talent. 

Furthermore, there is an interesting 
tendency to build on the distinctive essence 
of the Greek visual culture - a distinctive 
aesthetic recognised the world over - giving it 
a refreshing perspective that represents a 
digital brand of Hellenic originality on an 
international level. A flourish of interest in 
architecture, urban planning, environmental 
awareness and a more holistic approach to 
branding, bringing together web and graphic 
design with innovative applications, client 
services and cultural events, comprises a new 
era of creativity and collaborations within the 
Athens design scene - all because of its 
unique combination of historical creativity, 
entertainment resources and insatiable 
appetite for innovation. 



























































































































































































trend map 





:hens has been 
sabited for over 
000 years and 
le the capital of 
Greece in 1833 


busybuilding 

www.busvbuildina.com 

busybuilding is a multi¬ 
disciplinary design agency based 
in Athens, founded in 2007 by Dimitris 
Gkazis. busybuidling’s diverse team of 
specialised experts consists of creators 
and technologists working to build 
brands, focusing on the creation and 
implementation of contemporary visual 
communication concepts through print, 
spatial and digital design services. 


Wckom* to Elina Hotel Apartments! 


k2design 

www.k2desian.ar 

Established in 1988 by 
Yannis Kouroudis, k2design 


f Eosnet 

www.eosnet.g r 
Giorgos Selimis founded 
EOSNET in 2000 and 
currently serves as its creative 
director. The agency describes 
itself as an intelligent creative 
agency that is driven by the 
pursuit of classic, modern and 
iconic visual ideas that 
encapsulate its clients’ ambition. 
The agency provides a host of 
service including website design, 
intranet applications, branding 
and print. 


consists of a team of sixteen 
specialists and a number of external 
associates, offering unique and 
highly creative solutions to the 
communicative needs of its clients. It 
offers complete services of branding 
and design, the study and design of 
corporate identity, and product 
communication through 
conventional and digital means. 

' 


YALOS Branding 
Intelligence 

www.yalosbranding.com 
YALOS Branding Intelligence is a 
company made up of branding 
professionals established in 1994. During 
the last five years, YALOS Branding 
Intelligence has established an extensive 
network of expert branding agencies, 
providing expertise on an international 
level to clients including JTI, ICI Akzo Nobel 
J&P International, Pierre Fabre, WWF 
International and L’Oreal, among others. 
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Branding ICI Dulux 
Paints for an expansion 
in Southeastern Europe 


©Dulux 


Rodanthi Senduka, 
creative director 

Yasu frozen yogurt 


Despoina Sevasti, 
assistant creative director 


Gina Senduka, 
managing director 

The Benaki Museum 


The Benaki Museum is constituted by a complex of 
buildings exhibiting a vast array of collections in 
various Athens locations. The new building at 138 
Pireos Street is the perfect spot to see the most 
exiting contemporary art exhibitions and events. 


Yasu is the top Greek frozen yogurt in town. The Yasu 
shop at The Mall Athens is characterised by smart 
architectural design exuding an unpretentious and 
confident look, and discreetly conveying the 
’Greekness’ of the brand. 


The Onassis Cultural Centre is Athens’ new cultural 
space, hosting events across the whole spectrum of 
the arts. The building reflects the intense attic light 
and creates the impression from afar of a gentle 
wave, while the top storey has breath-taking views. 
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designer Subscriptions Voucher 


l*'' YES! I would like to subscribe to Web Designer 

Your details 

Title_First name_ 

Surname_ 

Address_ 


Postcode_Country_ 

Telephone number_ 

Mobile number_ 

Email address_ 

Please complete your email address to receive news and special offers 

Direct Debit Payment 

I UK Direct Debit pay merit 

Pay only £25.15 every six issues (save 30%) 


Instruction to your Bank or ^A^Vdirect 

Building Society to pay by Direct Debit e b ' x 

iBAain 

m«t ifHiNQ Please fill in the form and send it to. Imagine Publishing Limited, 800 Guillat Avenue. Kent Science Park. Sittingbourne. ME9 8GU 

Name and full postal address of your Bank or Building Society Originator’s Identification Number 

To: The Manager Bank/Building Society 

5 0 1 8 8 4 

Address 

Reference Number 



| 

Postcode 

Instructions to your Bank or Building Society 

Please pay Imagine Publishing Limited Direct Debits from the account detailed In this 

Name(s) of account holderCs) 

Instruction subject to the safeguards assured by the Direct Debit guarantee. 1 understand 


passed on electronically to my Bank/Bullding Society 


Branch sort code 

I III 

Bank/Building Society account number 


Banks and Building Societies may not accept Direct Debit instructions for some types of account 

Payment details 

YOUR EXCLUSIVE READER PRICE 1 YEAR (13 ISSUES) 

I UK £62.30 (Save 20%) I Europe £70 I World £80 

Cheque 

I enclose a cheque for £_ 

(made payable to Imagine Publishing Ltd) 


Credit/Debit Card 

Visa I MasterCard 

Card number 


Amex 


1111111111111 


□ Maestro 
Expiry date 

. 


Security number I I I (last three digits on the strip at the back of the card) 

Issue number I I (if Maestro) 


Signed_ 

Date_ 

Code: PAG199 

C Tick this box if you do not wish to receive any promotional material from Imagine Publishing Ltd. 
r~ Tick this box if you do not wish to receive promotional material from other companies. 

Terms and conditions apply. We publish 13 issues a year. Your subscription will start from the next available 
issue unless otherwise indicated. Direct Debit guarantee details available on request. This offer expires 
without notice. 

I would like my subscription to start from issue: 1 I 1 

Return this order form to: 

Web Designer Subscriptions Department 800 Guillat Avenue, 

Kent Science Park, Sittingbourne, ME9 8GU, or email it to 

webdesigner@servicehelpline.co.uk 


THREE WAYS 

TO SUBSCRIBE 

!=• Online 

Order via credit or debit card, just visit: 

www.imaginesubs.co.uk/wed 

and enter code PAG199 

f Telephone 

Order by phone, just call: 

08448488413 

Overseas: +44 (0) 1795 592 878 
and quote code PAG199 

f Post or email 

Please complete the form and post it to: 

Web Designer Subscriptions, 

800 Guillat Avenue, 

Kent Science Park, 

Sittingbourne, ME9 8GU 

Alternatively, scan and email the form to: 

webdesigner@servicehelpline.co.uk 



GO DIGITAL! 


GREAT DIGITAL SUBSCRIPTION 
OFFERS AVAILABLE AT: 

imaginesubs.co.uk 

FOR ANDROID, MAC, PC 
iPHONE & iPAD 


Manage your subscription account online atwww.imaginesubs.co.uk 












































Let Web Designer unleash your creative side! 

Subscribe now and 

SAVE 30% 

The only magazine you need to design and develop stunning websites 
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!=• Photoshop & Illustrator 
\ l Flash & ActionScript 
Plus site showcases 
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Our web-hosting guide is brought to you in association with 
Fasthosts, the UK’s leading reseller web-hosting provider 
•Unlimited websites • Use your own brand throughout 
•Unlimited bandwidth • 24/7 expert UK-based support 
•Unlimited web space • No-risk trial - 3 months free 
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Got a deal 
you think we 
should list? 

Whether you’re a hosting firm keen to promote your 
products or a happy customer who wants a favourite 
provider to be listed, drop us a line with the details! 

| webdesigner@imagine-publishing.co.uk 


Keep an eye on the latest packages and 

deals with our comprehensive list of service providers 



l&i 


1 & 11nternet Ltd. 

www.1and1.co.uk 


1&1 Starter (Linux) 

1&1 Standard (Linux) 
1&1 Standard (MS) 

1&1 Unlimited (Linux) 
1&1 Unlimited (MS) 
1&1 Business (Linux) 
1&1 Business (MS) 


08443351211 £29.88 5GB Unlimited 1,000 / X Y Y Y Y Y 

08443351211 £59.88 50GB Unlimited 3,000 / / / Y Y Y Y 

08443351211 £71.88 50GB Unlimited 3,000 Y X Y Y Y Y Y 

08443351211 £83.88 Unlimited Unlimited 5,000 Y Y Y Y Y Y Y 

08443351211 £107.88 Unlimited Unlimited 5,000 Y X Y Y Y Y Y 

08443351211 £119.88 Unlimited Unlimited Unlimited Y Y Y Y Y Y Y 

08443351211 £155.88 Unlimited Unlimited Unlimited Y X Y Y Y Y Y X 


111WebHost.com 

llWebHOSt s h ttD://111webhost.c 


Unlimited Web Hosting Pack N/A 
http://111webhOSt.com starter Web Hosting Pack N/A 

Budget Web Hosting Pack N/A 

WordPress Web Hosting Pack N/A 
Drupal Web Hosting Pack N/A 
Joomla! Web Hosting Pack N/A 
osCommerce Web Hosting Pack N/A 
ZenCart Web Hosting Pack N/A 
PrestaShop Web Hosting Pack N/A 


£60 Unlimited Unlimited Unlimited / 


£30 

£12 

£24 

£24 

£24 

£24 

£24 

£24 


5GB 

1GB 

5GB 

5GB 

5GB 

5GB 

5GB 

5GB 


2GB 

1GB 

2GB 

2GB 

2GB 

2GB 

2GB 

2GB 


100 

5 

100 

100 

100 

100 

100 

100 


/ 

/ 

/ 

/ 

/ 

/ 

/ 

/ 


/ 

/ 

/ 

/ 

/ 

/ 

/ 

/ 


123-reg (www.123-reg.co.uk) 

123-reg (www.123-reg.co.uk) 

Starter 

Plus 

0845 859 0018 

0845 859 0018 

£29.88 

£59.88 

1GB 

5GB 

5GB 

50GB 

20 

500 

/ 



/ 

✓ 

/ 

/ 

/ 

✓ 

/ 

/ 


123-reg (www.123-reg.co.uk) 

Pro 

0845 859 0018 

£107.88 

10GB 

100GB 

750 

/ 



/ 

/ 

/ 

/ 


123-reg (www.123-reg.co.uk) 

Bus Pro 

0845 859 0018 

£179.88 

20GB 

Unlimited 

1,000 

/ 



/ 

/ 

/ 

✓ 


123-reg (www.123-reg.co.uk) 

Plus (MS) 

0845 859 0018 

£59.88 

2GB 

25GB 

100 

/ 



/ 

/ 

/ 

/ 


123-reg (www.123-reg.co.uk) 

Pro (MS) 

0845 859 0018 

£107.88 

5GB 

50GB 

500 

/ 



/ 

/ 

/ 

/ 


123-reg (www.123-reg.co.uk) 

Bus Pro (MS) 

0845 859 0018 

£179.88 

10GB 

150GB 

1,000 

/ 



/ 

/ 

/ 

/ 


2020Media (www.2020media.com) 

Light User 

0870 3212020 

£45 

20MB 

1GB 

3 

/ 

/ 

/ 

/ 

/ 

/ 

/ 


2020Media (www.2020media.com) 

Everyday 

08703212020 

£100 

200MB 

10GB 

15 

/ 

/ 

/ 

/ 

/ 

✓ 

/ 


2020Media (www.2020media.com) 

Business/Pro 

08703212020 

£275 

500MB 

20GB 

50 

/ 

/ 

/ 

/ 

/ 

/ 

/ 


2020Media (www.2020media.com) 

JAVA Tomcat 

0870 3212020 

£300 

100MB 

3GB 

15 

/ 

/ 

/ 

/ 

/ 

/ 

/ 


2020Media (www.2020media.com) 

ASP.Net 

0870 3212020 

£275 

100MB 

3GB 

15 

/ 

/ 

/ 

/ 

/ 

/ 

/ 


4D Data Centres (www.4dhosting.com) 

Bronze Package 

0845166 8386 

£40 

10MB 

500MB 

2 

/ 


/ 

/ 

/ 

/ 

/ 


4D Data Centres (www.4dhosting.com) 

Silver Package 

0845166 8386 

£64.99 

20MB 

2GB 

10 

/ 


/ 

/ 

/ 

/ 

/ 


4D Data Centres (www.4dhosting.com) 

Gold Package 

0845166 8386 

£79.99 

50MB 

2GB 

50 

/ 


/ 

/ 

/ 

/ 

/ 


4D Data Centres (www.4dhosting.com) 

Titanium Package 

0845166 8386 

£149.99 

500MB 

5GB 

500 

/ 


/ 

/ 

/ 

/ 

/ 

/ 

4D Data Centres (www.4dhosting.com) 

Reseller Package 

0845166 8386 

£299.99 

1GB 

10GB 

1,000 

/ 


/ 

/ 

/ 

/ 

/ 

/ 

Blackfoot Hosting Ltd (www.blackfoot.co.uk) 

Home 

N/A 

£40 

500MB 

5GB 

5 

/ 

/ 

/ 

/ 


/ 

/ 


Blackfoot Hosting Ltd (www.blackfoot.co.uk) 

Business 

N/A 

£50 

1GB 

20GB 

100 

/ 

/ 

/ 

/ 


/ 

/ 


Blackfoot Hosting Ltd (www.blackfoot.co.uk) 

eCommerce 

N/A 

£100 

2GB 

40GB 

200 

/ 

/ 

/ 

/ 


✓ 

/ 


Blackfoot Hosting Ltd (www.blackfoot.co.uk) 

Professional 

N/A 

£150 

3GB 

60GB 

300 

/ 

✓ 

/ 

/ 


✓ 

/ 


Blacknight (www.blacknight.com) 

Minimus 

35359 918 3072 

£45 

10GB 

200GB 

Unlimited 

✓ 

/ 

/ 

/ 

/ 

/ 

/ 


Blacknight (www.blacknight.com) 

Medius 

35359 918 3072 

£79 

20GB 

400GB 

Unlimited 

✓ 

✓ 

/ 

/ 

/ 

/ 

/ 


Blacknight (www.blacknight.com) 

Maximus 

35359 918 3072 

£45 

30GB 

600GB 

Unlimited 

/ 

✓ 

/ 

/ 

/ 

/ 

/ 


Bravo14 (http://bravo14.co.uk) 

Starter Linux 

N/A 

£130 

2,000MB 

2,000MB 

10 

/ 

/ 

✓ 

✓ 


/ 

/ 

✓ 

Bravo14 (http://bravo14.co.uk) 

Starter Windows 

N/A 

£20 

2,000MB 

2,000MB 

10 

/ 

✓ 

/ 

✓ 


✓ 

/ 

✓ 

Bravo14 (http://bravo14.co.uk) 

Business Linux 

N/A 

£45 

4,000MB 

4,000MB 

4,000 

/ 

/ 

/ 

/ 


/ 

/ 

/ 

Bravo14 (http://bravo14.co.uk) 

Business Windows 

N/A 

£45 

4,000MB 

4,000MB 

4,000 

✓ 

/ 

✓ 

✓ 


/ 

✓ 

✓ 

Bravo14 (http://bravo14.co.uk) 

Ultimate Linux 

N/A 

£60 

Unlimited 

Unlimited 

Unlimited 

/ 

/ 

/ 

/ 


✓ 

/ 

✓ 

Bravo14 (http://bravo14.co.uk) 

Ultimate Windows 

N/A 

£60 

Unlimited 

Unlimited 

Unlimited 

/ 

/ 

/ 

/ 


/ 

/ 

/ 

Daily Internet (www.daily.co.uk) 

Entry 

0845 4662100 

£19.28 

500MB 

5GB 

75 

/ 


/ 


✓ 

✓ 

✓ 


Daily Internet (www.daily.co.uk) 

Home 

0845 4662100 

£50.90 

3GB 

30GB 

30 

✓ 

✓ 

/ 


/ 

✓ 

✓ 


Daily Internet (www.daily.co.uk) 

Business 

0845 4662100 

£53.94 

12GB 

150GB 

600 

/ 

/ 

/ 


/ 

✓ 

/ 


Daily Internet (www.daily.co.uk) 

Business Plus 

0845 4662100 

£77.94 

24GB 

250GB 

Unlimited 

/ 

/ 

/ 


/ 

/ 

/ 


Designwasp (http://designwasp.com) 

Starter 

0844 372 9848 

£30 

3GB 

20GB 

1,000 

/ 

/ 


/ 


/ 

/ 


Designwasp (http://designwasp.com) 

Home 

0844372 9848 

£40 

10GB 

50GB 

10,000 

/ 

/ 


/ 


/ 

/ 


Designwasp (http://designwasp.com) 

Business 

0844372 9848 

£60 

Unlimited 

Unlimited 

Unlimited 

/ 

/ 


✓ 


✓ 

/ 



104 


hosting listings 






















In association with 


fasthosts 


*0* "'v. 



Get your listing highlighted! Contact Richard 
O richard.rust@iniagine-publishing.co.uk 
0+44(0)1202586436 hosti ng listings 



Featured host of the month: Blackfoot Hosting www.blackfoot.co.uk 


^MocJk.. u 


™ " " " " 




NAME AND URL 


Offering more reasons for choosing one of the listed providers 


Blackfoot is an experienced UK-based web-hosting provider 
with a proven pedigree in offering hosting and domain name 
registration services since 1999. Specialising in Linux-based 
servers, housed across three London data centres, Blackfoot promises 
24/7 monitoring and a dedicated support team to guarantee uptime 


and first-class delivery. Hosting options are available in five flavours 
ranging from the entry-level Home solution for £40 per year, up to 
the powerful eCommerce, Professional and Partner packages priced 
between £100-200. All come with access to the feature-packed cPanel 
control panel for intuitive maintenance. 



Designwasp (http://designwasp.com) 

Windows Unlimited 

0844 372 9848 

£60 

Unlimited 

Unlimited 

Unlimited 

/ 

/ 


/ 


y 

y 


Designwasp (http://designwasp.com) 

Windows Home 

0844 372 9848 

£40 

10GB 

50GB 

1,000 

/ 

/ 


/ 


y 

y 


Designwasp (http://designwasp.com) 

CheapHost 

0844 372 9848 

£10 

300MB 

100MB 

5 




/ 



y 


Digital Gibbon Ltd (http://digitalgibbon.com) 

Personal 

01865 589 990 

£12 

1GB 

Unlimited 

10 

/ 



/ 

/ 

y 

y 


Digital Gibbon Ltd (http://digitalgibbon.com) 

Personal Plus 

01865 589 990 

£48 

Unlimited 

Unlimited 

50 

/ 



/ 

/ 

y 

y 


Digital Gibbon Ltd (http://digitaigibbon.com) 

Business 

01865 589 990 

£108 

5GB 

Unlimited 

1000 

/ 

/ 


/ 

/ 

y 

y 


Digital Gibbon Ltd (http://digitalgibbon.com) 

Business Professional 

01865 589 990 

£132 

Unlimited 

Unlimited 

Unlimited 

/ 

/ 


✓ 

y 

y 

y 


Domaincheck (www.domaincheck.co.uk) 

Bronze Linux 

0191 261 2252 

£30 

100MB 

1GB 

5 


/ 

/ 

/ 

y 

y 

y 

y 

Domaincheck (www.domaincheck.co.uk) 

Gold Linux 

0191 261 2252 

£100 

500MB 

5GB 

25 

/ 

/ 

/ 

/ 

y 

y 

y 

y 

Domaincheck (www.domaincheck.co.uk) 

Bronze Windows 

0191261 2252 

£30 

100MB 

1GB 

5 


/ 

/ 

/ 

y 

y 

y 

y 

Domaincheck (www.domaincheck.co.uk) 

Gold Windows 

0191 261 2252 

£100 

500MB 

5GB 

25 

/ 

/ 

/ 

/ 

y 

y 

y 

y 

Donhost (www.donhost.co.uk) 

Reseller Unix 

08452265566 

£399.99 

Unlimited 

Unlimited 

Unlimited 

✓ 


✓ 

/ 

y 

y 

y 


Donhost (www.donhost.co.uk) 

Reseller Windows 

08452265566 

£499.99 

Unlimited 

Unlimited 

Unlimited 

/ 


/ 

/ 

y 

y 

y 


Donhost (www.donhost.co.uk) 

Enterprise 

08452265566 

£89.99 

1GB 

2GB 

250 

/ 


/ 

/ 

y 

y 

y 


Donhost (www.donhost.co.uk) 

Commerce 

08452265566 

£179.99 

2GB 

5GB 

500 

/ 


/ 

/ 

y 

y 

y 


Donhost (www.donhost.co.uk) 

Designer 

0845226 5566 

£119.99 

1GB 

2GB 

250 

/ 


/ 

/ 

y 

y 

y 


Donhost (www.donhost.co.uk) 

Developer 

08452265566 

£259.99 

2GB 

5GB 

500 

/ 


/ 

/ 

y 

y 

y 


eHosting (www.ehosting.com) 

Starter 

0844 999 4100 

£23.88 

1GB 

25GB 

10 






y 

y 

y 

eHosting (www.ehosting.com) 

Personal 

0844 9994100 

£59.88 

2.5GB 

Unlimited 

50 

✓ 





y 

y 

y 

eHosting (www.ehosting.com) 

Expert 

0844 9994100 

£95.88 

5GB 

Unlimited 

250 

/ 





y 

y 

y 

eHosting (www.ehosting.com) 

Virtual 

0844 999 4100 

£227.88 

50GB 

Unlimited 

Unlimited 

/ 




y 

y 

y 

y 

Equiphase (www.equiphase.net) 

Bronze 

0121 3144865 

£30 

200MB 

2GB 

10 

✓ 

✓ 


/ 


y 

y 

y 

Equiphase (www.equiphase.net) 

Silver 

0121 3144865 

£42 

400MB 

5GB 

20 

✓ 

✓ 


✓ 


y 

y 

y 

Equiphase (www.equiphase.net) 

Gold 

0121314 4865 

£72 

800MB 

10GB 

100 

/ 

✓ 


✓ 


y 

y 

y 

Equiphase (www.equiphase.net) 

Platinum 

0121 3144865 

£114 

1,200MB 

40GB 

200 

✓ 

/ 

/ 

✓ 

y 

y 

y 

y 

Eu rofasthost.com (www.eu rofasthost.com) 

Email Only 

02380 249 823 

£40 

1GB 

2GB 

10 



/ 

/ 

y 

y 

y 

y 

Eu rofasthost.com (www.eu rofasthost.com) 

Essential 

02380 249 823 

£75 

2GB 

5GB 

10 



/ 

/ 

y 

y 

y 

y 

Eurofasthost.com (www.eurofasthost.com) 

Superior 

02380 249 823 

£140 

5GB 

10GB 

25 

/ 

/ 

✓ 

/ 

y 

y 

y 

y 

Eurofasthost.com (www.eurofasthost.com) 

Premium 

02380 249 823 

£250 

10GB 

25GB 

100 

/ 

/ 

✓ 

/ 

y 

y 

y 

y 

Evohosting (www.evohosting.co.uk) 

Starter 

N/A 

£29.99 

500MB 

1GB 

3 

/ 

/ 

/ 

/ 


y 

y 

y 

Evohosting (www.evohosting.co.uk) 

Home 

N/A 

£54.99 

2.5GB 

30GB 

50 

/ 

✓ 

/ 

/ 


y 

y 

y 

Evohosting (www.evohosting.co.uk) 

Business 

N/A 

£79.99 

6.5GB 

Unlimited 

Unlimited 

/ 

/ 

/ 

/ 


y 

y 

y 

Evohosting (www.evohosting.co.uk) 

eCommerce 

N/A 

£159.99 

30GB 

Unlimited 

Unlimited 

✓ 

✓ 

/ 

/ 


y 

y 

y 

Giacom (www.giacom.com) 

Business Pro 

0800 542 7500 

£199 

100MB 

2GB 

100 

/ 

/ 

/ 

/ 

y 

y 

y 

y 



Personal Standard 

0844 583 0777 

£53.88 

5GB 

Unlimited 

500 

/ 

X 

/ 

/ 

/ 

y 

/ 

X 


Business Standard 

08445830777 

£95.88 

25GB 

Unlimited 

1,000 

/ 

Option 

/ 

/ 

/ 

/ 

/ 

X 


Business Premium 

0844583 0777 

£173.88 

50GB 

Unlimited 

Unlimited 

/ 

/ 

/ 

/ 

/ 

/ 

/ 

X 

Fasthosts 

WD Starter Reseller 

0844 583 0777 

£149.99 

20GB 

Unlimited 

Unlimited 

/ 

Option 

Option 

/ 

/ 

/ 

/ 

X 

www.fasthosts.co.uk 

Advanced Reseller 

08445830777 

£199.99 

Unlimited 

Unlimited 

Unlimited 

/ 

Option 

Option 

/ 

/ 

/ 

/ 

X 

Heart Internet (www.heartinternet.co.uk) 

Starter Professional 

0845 6447750 

£29.80 

2.5GB 

10GB 

1,000 




✓ 


✓ 

y 

y 

Heart Internet (www.heartinternet.co.uk) 

Home Professional 

0845 644 7750 

£89.99 

10GB 

50GB 

10,000 

/ 

y 


/ 


/ 

y 

y 

Heart Internet (www.heartinternet.co.uk) 

Business Professional 

0845 644 7750 

£129.99 

Unlimited 

Unlimited 

Unlimited 

/ 

y 


/ 


/ 

y 

y 

Heart Internet (www.heartinternet.co.uk) 

Reseller Professional 

0845 644 7750 

£299.99 

Unlimited 

Unlimited 

Unlimited 

✓ 

y 


✓ 


/ 

y 

y 

Hostway (www.hostway.co.uk) 

Silver 

08081801880 

£79.50 

150MG 

3GB 

5 


Option 

✓ 

/ 


y 

y 


Hostway (www.hostway.co.uk) 

Gold 

08081801880 

£139.50 

300MB 

5GB 

10 

/ 

Option 

/ 

/ 

/ 

y 

y 


Hostway (www.hostway.co.uk) 

Gold Plus 

08081801880 

£189.50 

450MB 

10GB 

30 

/ 

Option 

/ 

✓ 

/ 

y 

y 


Hostway (www.hostway.co.uk) 

Platinum 

08081801880 

£359.50 

600MB 

20GB 

50 

/ 

Option 

/ 

/ 

y 

y 

y 


Hostway (www.hostway.co.uk) 

Platinum Plus 

08081801880 

£599.50 

1.2GB 

40GB 

10 

/ 

Option 

y 

/ 

y 

y 

y 


Hostway (www.hostway.co.uk) 

Email Plus 

08081801880 

£49.95 

50MB 

N/A 

5 

N/A 

N/A 

N/A 

/ 


y 

y 


ICUK www.icukhosting.co.uk 

Professional 

0845 009 9175 

£30 

250MB 

1GB 

50 

/ 

✓ 

option 

/ 

y 

y 

y 


ICUK www.icukhosting.co.uk 

Advanced 

0845 009 9175 

£50 

2GB 

2.5GB 

150 

/ 

y 

option 

/ 

y 

y 

y 


ICUK www.icukhosting.co.uk 

Enterprise 

0845 009 9175 

£80 

2GB 

500MB 

Unlimited 

/ 

y 

option 

/ 

y 

y 

y 


ICUK www.icukhosting.co.uk 

Professional Plus 

0845 009 9175 

£90 

500MB 

5GB 

100 

/ 

y 

option 

/ 

y 

y 

y 


ICUK www.icukhosting.co.uk 

Premium Plus 

0845 009 9175 

£150 

1GB 

12.5GB 

500 

/ 

y 

option 

/ 

y 

y 

y 


ICUK www.icukhosting.co.uk 

Enterprise Plus 

0845 009 9175 

£300 

2GB 

20GB 

Unlimited 

✓ 

y 

option 

✓ 

y 

y 

y 
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Our web-hosting guide is brought to you in association with 
Fasthosts, the UK’s leading reseller web-hosting provider 
•Unlimited websites • Use your own brand throughout 
•Unlimited bandwidth • 24/7 expert UK-based support 

• Unlimited web space • No-risk trial - 3 months free 


1-Iosliiig listings 

Keep an eye on the latest packages 

and deals with our comprehensive list of service providers 


In association with 



Discover what an enhanced 
listing can do for your 
business. Contact Richard on: 

0 + 44 ( 0)1202586436 

Continued... 


NAME AND URL 



ICUK www.icukhosting.co.uk 

Reseller Windows 

0845 009 9175 

£200 

Unlimited 

Unlimited 

Unlimited 

/ 

y 

option 

y 

y 

y 

y 

ICUK www.icukhosting.co.uk 

Reseller Linux 

0845 009 9175 

£200 

Unlimited 

Unlimited 

Unlimited 

✓ 

y 

option 

y 

y 

y 

y 

ICUK www.icukhosting.co.uk 

Reseller Enterprise 

0845 009 9175 

£500 

Unlimited 

Unlimited 

Unlimited 

✓ 

y 

option 

y 

y 

y 

y 

JAB Web Hosting (www.jabwebhosting.com) 

Mail - M105 

0800 043 0153 

£15.17 

256MB 

3GB 

50 




y 

y 

y 

y 

JAB Web Hosting (www.jabwebhosting.com) 

Home - H25 

0800 0430153 

£24.47 

1GB 

8GB 

50 

/ 



y 

y 

y 

y 

JAB Web Hosting (www.jabwebhosting.com) 

Professional - P55 

0800 0430153 

£45 

2GB 

15GB 

75 

/ 

y 


y 

y 

y 

y 

JAB Web Hosting (www.jabwebhosting.com) 

Reseller - R25 

0800 0430153 

£97.88 

2GB 

30GB 

250 

/ 

y 


y 

y 

y 

y 

JAB Web Hosting (www.jabwebhosting.com) 

Reseller-R105 

0800 043 0153 

£271.60 

4GB 

Unlimited 

Unlimited 

/ 

y 


y 

y 

y 

y 

LCN (www.lcn.com) 

Blog 

01438 342 490 

£20 

100MB 

1GB 

5 



y 

y 

y 

y 

y 

LCN (www.lcn.com) 

Starter 

01438 342 490 

£30 

1GB 

1GB 

10 



y 

y 

y 

y 

y 

LCN (www.lcn.com) 

Starter 

01438 342 490 

£30 

1GB 

1GB 

10 



y 

y 

y 

y 

y 

LCN (www.lcn.com) 

Dynamic 

01438 342 490 

£50 

2GB 

2GB 

20 

y 

y 

y 

y 

y 

y 

y 

LCN (www.lcn.com) 

Premium 

01438 342 490 

£80 

5GB 

5GB 

50 

y 

y 

y 

y 

y 

y 

y 

LCN (www.lcn.com) 

Unlimited 

01438 342 490 

£120 

Unlimited 

Unlimited 

Unlimited 

y 

y 

y 

y 

y 

y 

y 

LD Hosts (http://ldhosts.co.uk) 

LD Budget (Linux) 

07891235858 

£11.88 

1GB 

1GB 

500 

y 

y 


y 

y 

y 

y 

LD Hosts (http://ldhosts.co.uk) 

LD Home (Linux) 

07891235858 

£23.88 

10GB 

10GB 

5,000 

y 

y 


y 

y 

y 

y 

LD Hosts (http://ldhosts.co.uk) 

LD Pro (Linux) 

07891235858 

£41.88 

50GB 

50GB 

20,000 

y 

y 


y 

y 

y 

y 

LD Hosts (http://ldhosts.co.uk) 

LD Unlimited (Linux) 

07891235858 

£60 

Unlimited 

Unlimited 

Unlimited 

y 

y 


y 

y 

y 

y 

LD Hosts (http://ldhosts.co.uk) 

Windows Home 

07891235858 

£17.88 

2GB 

2GB 

1,000 

y 

y 


y 

y 

y 

y 

LD Hosts (http://ldhosts.co.uk) 

Windows Unlimited 

07891235858 

£60 

Unlimited 

Unlimited 

Unlimited 

y 

y 


y 

y 

y 

y 

Media Temple (http://mediatemple.net) 

Shared-Server Pro 

+1310 841 5500 

£64 

2GB 

1TB 

1,000 

y 

y 

y 

y 

y 

y 

y 

Media Temple (http://mediatemple.net) 

Shared-Server Advanced 

+1310 841 5500 

£109 

5GB 

1.5TB 

5,000 

y 

y 

y 

y 

y 

y 

y 


/ 

✓ 

/ 

/ 

✓ 

/ 

✓ 

✓ 

✓ 

/ 


NameHOG 

•J Affordable internet Solutions 

EMAIL ONLY 

STARTER 

01604 212 904 

01604 212 904 

£11.99 

£36.99 

2.5GB 

10GB 

15GB 

150GB 

10 

Unlimited 

X 

X 

X 

X 

/ 

/ 

/ 

s 

/ 

/ 

/ 

/ 

/ 

/ 


HOME PRO 

01604 212 904 

£59.99 

25GB 

Unlimited 

Unlimited 

/ 

/ 

/ 

/ 

✓ 

/ 

/ 


NameHOG www.namehog.net 

BUSINESS 

01604212904 

£109.99 

Unlimited 

Unlimited 

Unlimited 

/ 

/ 

/ 

/ 

/ 

/ 

/ 



Namesco (www.names.co.uk) 

Startup Plus 

0845363 3632 

£89.99 

500MB 

5GB 

10 

y 

y 

y 

y 

y 

y 

y 

y 

Namesco (www.names.co.uk) 

Business 

0845 363 3632 

£149.99 

2,000MB 

20GB 

100 



y 

y 

y 

y 

y 

y 

Namesco (www.names.co.uk) 

Business Plus 

0845 363 3632 

£89.99 

3,000MB 

30GB 

200 

y 

y 

y 

y 

y 

y 

y 

y 

Namesco (www.names.co.uk) 

Designer 

0845 363 3632 

£239.88 

1GB 

20GB 

200 

y 

y 

y 

y 

y 

y 

y 

y 

Namesco (www.names.co.uk) 

Designer Plus 

0845 363 3632 

£479.88 

Unlimited 

30GB 

Unlimited 

y 

y 

y 

y 

y 

y 

y 

y 

An 

DEVELOPER 

0800 0612801 

£32.89 

1GB 

Unlimited 

500 

/ 

/ 

/ 

/ 

/ 

/ 

/ 

y 

Ijj N6-TCET6RH 

ONE 

0800 0612801 

£109.99 

5GB 

Unlimited 

1000 

/ 

/ 

/ 

/ 

/ 

/ 

/ 

/ 


RESELLER 

0800 061 2801 

£274.89 

Unlimited 

Unlimited 

1000 

/ 

/ 

/ 

/ 

/ 

/ 

/ 

/ 

Netcetera www.netcetera.co.uk 

VM500 Server 

0800 0612801 

£300 

20GB 

Unlimited 

Unlimited 

/ 

/ 

/ 

/ 

/ 

/ 

/ 

/ 


2200DC Server 

08000612801 

£720 

160GB 

Unlimited 

Unlimited 

/ 

/ 

/ 

/ 

/ 

/ 

/ 

/ 


3000DC Server 

0800 0612801 

£1,200 

2x500GB 

Unlimited 

Unlimited 

/ 

/ 

/ 

/ 

/ 

/ 

/ 

/ 


2600QC Server 

0800 0612801 

£1,800 

2x500GB 

Unlimited 

Unlimited 

/ 

/ 

/ 

/ 

/ 

/ 

/ 

/ 

Netplan (www.netplan.co.uk) 

Shared 100 

02071000 424 

£60 

100MB 

1GB 

5 

/ 

/ 

/ 

/ 

/ 

/ 

/ 

/ 

Netplan (www.netplan.co.uk) 

VS100 

02071000 424 

£600 

5GB 

5GB 

5 

/ 

/ 

/ 

/ 

/ 

/ 

/ 

/ 

Netplan (www.netplan.co.uk) 

VS200 

02071000 424 

£1,000 

10GB 

10GB 

10 

/ 

/ 

/ 

/ 

/ 

/ 

/ 

/ 

Netplan (www.netplan.co.uk) 

VS300 

02071000 424 

£2,000 

15GB 

50GB 

20 

/ 

/ 

/ 

/ 

/ 

/ 

/ 

/ 

Netplan (www.netplan.co.uk) 

Dedicated Servers 

02071000 424 

£3,000+ 

73GB+ 

1,500GB 

100+ 

/ 

/ 

/ 

/ 

/ 

/ 

/ 

/ 

PurplePaw (www.purplepaw.co.uk) 

Email 

N/A 

£25 

100MB 

1GB 

10 



/ 

y 


y 

/ 


PurplePaw (www.purplepaw.co.uk) 

Play 

N/A 

£40 

100MB 

1GB 

10 



y 

y 


y 

y 


PurplePaw (www.purplepaw.co.uk) 

Plus 

N/A 

£65 

750MB 

5GB 

25 

y 

y 

y 

y 


y 

y 


PurplePaw (www.purplepaw.co.uk) 

Power 

N/A 

£95 

2GB 

10GB 

100 

y 

y 

y 

y 


y 

y 


PurplePaw (www.purplepaw.co.uk) 

R3 Reseller 

N/A 

£660 

10GB 

50GB 

Unlimited 

y 

y 

y 

y 


y 

y 


Reddex UK (www.reddexuk.com) 

Reddex Design Starter 

0843289 4625 

£18 

1GB 

Unlimited 

10 

y 


y 

y 

y 

y 

y 

/ 

Reddex UK (www.reddexuk.com) 

Reddex Design Business 

0843 289 4625 

£59.88 

10GB 

Unlimited 

100 

y 

y 

y 

y 

y 

y 

y 

/ 

Reddex UK (www.reddexuk.com) 

Reddex Design Premium 

08432894625 

£107.88 

100GB 

Unlimited 

Unlimited 

y 

y 

y 

y 

y 

y 

y 

/ 

Skymarket (www.skymarket.co.uk) 

Standard 1 

0800 321 7788 

£49 

10MB 

2GB 

1 

y 


y 

y 

y 

y 

y 

/ 

Skymarket (www.skymarket.co.uk) 

Standard 2 

0800 321 7788 

£69 

20MB 

2GB 

1 

y 


y 

y 

y 

y 

y 

/ 
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fasthosts 


Can you 
recommend 
your host? 


Get your listing highlighted! Contact Richard 
O richard.rust@iniagine-publishing.co.uk 
0+44(0)1202586436 


Tweet us today with your 

O hosting comments and advice 

@WebDesignerMag 




NAME AND URL 



Skymarket (www.skymarket.co.uk) 

Premium 1 

0800 321 7788 

£99 

25MB 

2GB 

1 

✓ 


y 

y 

y 

✓ 

/ 

/ 

Skymarket (www.skymarket.co.uk) 

Premium 2 

0800 321 7788 

£149 

50MB 

2GB 

1 

/ 


y 

/ 

/ 

y 

y 

y 

STRATO Hosting (www.strato-hosting.co.uk) 

STRATO BasicWeb 

00800 8007 0070 

£48 

2GB 

Unlimited 

1,000 



/ 

/ 

✓ 

y 

y 


STRATO Hosting (www.strato-hosting.co.uk) 

STRATO PowerWeb 

00800 8007 0070 

£72 

6GB 

Unlimited 

2,000 

/ 


/ 

/ 

/ 

y 

y 


STRATO Hosting (www.strato-hosting.co.uk) 

STRATO AdvancedWeb 

00800 8007 0070 

£120 

20GB 

Unlimited 

4,000 

/ 


/ 

/ 

/ 

y 

y 


STRATO Hosting (www.strato-hosting.co.uk) 

STRATO EnterpriseWeb 

00800 8007 0070 

£180 

50GB 

Unlimited 

6.000 

✓ 


✓ 

y 

/ 

y 

y 


Streamline.net (www.streamline.net) 

Trial (3 month) 

0844 9411000 

N/A 

10GB 

Unlimited 

1,000 

/ 

Option 

/ 

✓ 

/ 

y 

y 


Streamline.net (www.streamline.net) 

Starter 

0844 9411000 

£23.88 

500MB 

Unlimited 

20 

/ 

Option 

/ 

/ 

/ 

y 

y 


Streamline.net (www.streamline.net) 

Personal 

0844 9411000 

£41.88 

3GB 

Unlimited 

500 

/ 

Option 

y 

y 

/ 

y 

y 


Streamline.net (www.streamline.net) 

Plus 

0844 9411000 

£71.88 

10GB 

Unlimited 

1,000 

/ 

Option 

/ 

✓ 

/ 

y 

y 


Streamline.net (www.streamline.net) 

Multisite 

0844 9411000 

£137.88 

20GB 

Unlimited 

Unlimited 

/ 

Option 

/ 

/ 

/ 

y 

y 


Swish Hosting (www.swishhosting.co.uk) 

Email 

08445 67 69 71 

£18 


Unlimited 

Unlimited 



/ 

/ 

/ 

y 

y 

y 

Swish Hosting (www.swishhosting.co.uk) 

Windows Hosting 

08445 67 69 71 

£66 


Unlimited 

Unlimited 

/ 

✓ 

y 

✓ 

/ 

y 

y 

y 

Swish Hosting (www.swishhosting.co.uk) 

Linux Hosting 

08445 67 69 71 

£66 


Unlimited 

Unlimited 

/ 

/ 

/ 

/ 

/ 

y 

y 

y 

Swish Hosting (www.swishhosting.co.uk) 

eCommerce 

08445 67 69 71 

£90 


Unlimited 

Unlimited 

/ 

/ 

y 

y 

/ 

y 

y 

y 

Swish Hosting (www.swishhosting.co.uk) 

SiteBuilder 

08445 67 69 71 

£12 


Unlimited 

Unlimited 

✓ 

✓ 

/ 

y 

✓ 

y 

y 

y 

Switch Media (www.switchmedia.com) 

Switch Standard 

0151 236 9111 

£159 

1GB 

50GB 

500 

✓ 




/ 

y 



Switch Media (www.switchmedia.com) 

Switch Business 

01512369111 

£249 

10GB 

150GB 

1500 

/ 




/ 

y 

y 


Switch Media (www.switchmedia.com) 

Business Pro 

0151 236 9111 

£348.96 

20GB 

300GB 

5000 

✓ 




/ 

y 

y 


thename.co.uk (www.thename.co.uk) 

Parking 

0870765 6364 

£52.88 

25MB 

500MB 

15 

/ 

✓ 

/ 

✓ 

/ 

y 

y 


thename.co.uk (www.thename.co.uk) 

Forwarding 

0870 7656364 

From £15 

N/A 

500MB 

N/A 



/ 

/ 

/ 

y 

y 


thename.co.uk (www.thename.co.uk) 

Hosting 

0870 765 6364 

From £7.50 

N/A 

N/A 

N/A 




/ 

/ 

y 

y 


Tidy Web Hosting (www.tidywebhosting.co.uk) 

Entry 

0844 884 9100 

£25 

100MB 

1GB 

Unlimited 

✓ 

✓ 

/ 

y 

/ 

y 

y 


Tidy Web Hosting (www.tidywebhosting.co.uk) 

Home 

0844 884 9100 

£50 

500MB 

5GB 

Unlimited 

/ 

/ 

/ 

/ 

/ 

y 

y 


Tidy Web Hosting (www.tidywebhosting.co.uk) 

HomePro 

0844 884 9100 

£100 

1GB 

10GB 

Unlimited 

/ 

✓ 

/ 

y 

/ 

y 

y 


Tidy Web Hosting (www.tidywebhosting.co.uk) 

Business 

0844 8849100 

£150 

2GB 

20GB 

Unlimited 

/ 

/ 

/ 

y 

/ 

y 

y 


Tidy Web Hosting (www.tidywebhosting.co.uk) 

BusinessPro 

0844 884 9100 

£250 

5GB 

50GB 

Unlimited 

/ 

/ 

/ 

/ 

/ 

y 

y 


TwentyHost (www.twentyhost.co.uk) 

BasicSS 

0845 6410776 

£24 

100MB 

1.500MB 

25 

/ 

/ 

/ 

/ 

/ 

y 

y 

y 

TwentyHost (www.twentyhost.co.uk) 

Standard5S 

0845 641 0776 

£45 

200MB 

3,000MB 

50 

/ 

/ 

✓ 

/ 

/ 

y 

y 

y 

TwentyHost (www.twentyhost.co.uk) 

Business5S 

0845 641 0776 

£70 

500MB 

7,500MB 

100 

/ 

/ 

/ 

/ 

/ 

y 

y 

y 

TwentyHost (www.twentyhost.co.uk) 

AdvancedSS 

0845 6410776 

£110 

1.000MB 

15.000MB 

200 

/ 

/ 

/ 

/ 

/ 

y 

y 

y 

VARiHOST (www.varihost.net) 

WordPress Basic 

0208144 7057 

£47.88 

2GB 

10GB 

10 

/ 



/ 

/ 

y 

y 

y 

VARiHOST (www.varihost.net) 

Word Press Plus 

02081447057 

£71.88 

4GB 

100GB 

100 

/ 

/ 


/ 

/ 

y 

y 

y 

VARiHOST (www.varihost.net) 

WordPress Extra 

0208144 7057 

£119.88 

unlimited 

Unlimited 

Unlimited 

/ 

/ 


y 

/ 

y 

y 

y 

WebFusion (www.webfusion.co.uk) 

Fusion Professional 

08451301602 

£107.40 

5GB 

50GB 

1,000 

/ 


/ 

/ 

/ 

y 

y 


WebFusion (www.webfusion.co.uk) 

Fusion Business 

08451301602 

£179.40 

10GB 

150GB 

1,500 

✓ 


/ 

y 

/ 

y 

y 


WebFusion (www.webfusion.co.uk) 

Fusion Developer 

08451301602 

£227.40 

20GB 

300GB 

5,000 

/ 


/ 

/ 

/ 

y 

y 


WebFusion (www.webfusion.co.uk) 

Fusion Reseller 

08451301602 

£329.99 

Unlimited 

Unlimited 

Unlimited 

/ 


/ 

y 

/ 

y 

y 


Web Wiz (www.webwiz.co.uk) 

Windows Starter 

08443581450 

£69.95 

1GB 

25GB 

100 

/ 

/ 

/ 

y 

/ 

y 

y 

y 

Web Wiz (www.webwiz.co.uk) 

Windows Professional 

08443581450 

£149.95 

4GB 

100GB 

500 

/ 

/ 

/ 

/ 

/ 

y 

y 

y 

Web Wiz (www.webwiz.co.uk) 

Windows Starter Reseller 

0844 3581450 

£199.95 

5GB 

25GB 

500 

/ 

/ 

/ 

y 

/ 

y 

y 

y 


Bronze (Linux) 

08450589000 

£47.88 

2GB 

20GB 

10 

/ 

/ 

/ 

/ 

/ 

/ 

/ 

X 


Silver (Linux) 

08450589000 

£95.88 

5GB 

50GB 

25 

/ 

/ 

/ 

/ 

/ 

/ 

/ 

X 

rTy7: 

Gold (Linux) 

08450589000 

£143.88 

10GB 

100GB 

50 

/ 

/ 

/ 

/ 

/ 

/ 

/ 

X 


Platinum (Linux) 

08450589000 

£239.88 

50GB 

250GB 

100 

/ 

/ 

/ 

/ 

/ 

/ 

/ 
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Reseller (Linux) 

08450589000 

£479.88 

150GB 

500GB 

250 

/ 

/ 

/ 

/ 

/ 

/ 

/ 

X 

• • 

Designer (Windows) 

08450589000 

£59.88 

2GB 

20GB 


/ 

X 

X 

/ 

/ 

/ 

/ 

X 

Zen Internet www.zen.co.uk 

Developer (Windows) 

08450589000 

£179.88 

10GB 

100GB 


/ 

X 

X 

/ 

/ 

/ 

/ 
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Golden rules to top hosting We identify and explain the key criteria for success... 


The best 

resources for you 

Selecting your ideal package is largely 
determined by the kinds of resources and quantity 
of features you require from your hosting solution. 
Key criteria like web space and monthly bandwidth 
are important for those services likely to be 
subjected to heavy amounts of traffic, which is 
why package solutions for enterprise applications 
are typically much more expensive. The general 
rule of thumb is not to buy more than you need or 
underestimate potential requirements... 


Competitive 
and reliable 

The hosting market is big business and 
hosting providers do try to drive prices down 
in a bid to entice your custom. Use our chart to 
compare costs, but be sure to visit the vendor 
websites to keep track of the latest deals, as 
they change. Remember that low price should 
not always be a deciding factor and that paying 
a premium for a more reliable, trusted and 
experienced vendor can offer you much better 
value for money in the long term. 


Putting you 
in control 

Modern hosting is all about giving 
customers the power to set up. monitor and 
maintain their web space with minimal fuss. Most 
commercial vendors offer access to award-winning 
and intuitive control panels that enable you to log 
in remotely and intuitively tweak your account, 
without the need to relay complicated instructions 
down the phone. Be sure to find out from your 
potential host as much as you can about the 
control panel and request a demo. 


Fantastic 
customer support 

If all else fails and you need some 
extra help to get your hosting back online, then 
a commitment to future customer support is key. 
Many vendors offer a service-level agreement 
which outlines what you can expect here, however 
most will be more explicit about whether phone 
support is included or email contact is preferred. 
Think about what you need for peace of mind and 
factor good, comprehensive technical support 
against the price. 
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Subscribe now and get 

*1 ISSUES FREE* 

The only magazine you need to design and develop stunning websites 


leaders 



TERMS & CONDITIONS 


*This is a US subscription offer; please don’t forget to guote USA5 
when ordering. You will actually be charged £60 sterling for an annual 
subscription. This is equivalent to $94 at the time of writing, although 
the exchange rate may vary. Seven free issues refers to the newsstand 
price of $14.99 for 13 issues totalling $194.87 compared with $94 for a 
subscription. Your subscription will start from the next available issue. 
Latest offer is based on newsstand price of $14.99 per issue compared 
with $7.23 through this offer. 

This offer expires 31 October 2012. 


JSm 


16-PAGE 

DEVELOPER 

SECTION^ 




develops 111 

A 


NlAKERSOFMAf 00 ' 


p,ip % creatr T 

amr._z -stf-- kf 


Subscribe now 

Online 

Order by visiting: 

www.imaginesubs.co.uk/wed 

and enter USA5 to get this exclusive offer! 

Telephone 

Order by phone, just call: 

+ 44 ( 0)1795592878 

and quote USA5 
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Premium Web Hosting 

Our hosting plans come ajith the following features as standard: 

• cPanel control panel 

• FREE Web applications 

• SPRM/Virus protection for email 

• Daily backups - multiple restore points 

Utilising Cloudlinux for rock solid stability and high performance, 
your website is in safe hands iuith us. 

from £3 .99 per month 



Web Hosting Reseller plans VPS Managed Servers 

http://ukwebsoluti.onsdirect.co.uk 


Read anything 
good lately? 


Shop for quality magazines, 
books and DVDs from 
Imagine Publishing 



1&1 SUMMER SPECIAL 

DOMAil 

OFFERS 



united 


www.1and1.co.uk 


•Offers apply to first year of registration only. The second year and subsequent years will be charged at 
regular price. Visit www.1and1.co.uk for full promotional offer details, terms and conditions. 

Prices exclude VAT. 


MAGAZINES 


BOOKS 


OVDS 


DOWNLOADS 


GIFTS 
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trade secret 

noun {c} -tred si kriht - A secret formula, method, or device that gives one an advantage over competitors. 

Low cost address lookup for your website 


Buy online from £15 ♦ vat 80% reduction of keystrokes entering addresses 

i ^ Eliminate spelling mistakes Create a professional image for your clients 

^ Reduced abandoned carts + Simple integration with SDK & working examples 

For more details visit postcode-softwa re. net or call 0845 83 82 666 



PostcodeAnywhere 

The easiest way to add features to your website. 

UK & international addressing | Address cleansing 
Payment validation | Customer profiling 
Store finder 


To find out more: 

Call: 0800 047 0495 
www.postcodeanywhere.com 






WEB HOSTING 


If RYwe b h osti ng... 

designers prefer it 
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Visit us online • ••• 

www.TidyWebHosting.co.uk 


Tidy Web Hosting is a trading name of Poldings Limited 

Registered in England & Wales (5935455). All prices subject to VAT. Call: 0844 884 9100 


1. Personal Support 

2. Fully Managed Plans 

3. Superior Servers 

4. Professional Features 

5. Unlimited Addons 
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clikpic 

Websites made easy 


Professionally designed websites 
for only £40 p.a. 

Clikpic is an easy-to-use service 
for people who want a website 
without the cost and hassle of 
setting one up. 

With minimal technical expertise 
required, you can use our online 
admin system and a wide 
choice of template designs to 
create and edit your own web 
site quickly, easily and very 
cost-effectively. 


• Update or change your site whenever 
you want and as often as you like. 

• Have as many pages as you like. 

• Dozens of style features and options 
to customise your site and give it 
your own feel and look. 

• Take orders online. 

• Opt to have your own domain name. 

Many additional features recently 
added with many more to come 


www.clikpic.com 14 day 
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GO» 

COMPILA 




no risk, money back guarantee! 
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Flexible technology 

today, tomorrow and the future 


Online technology Is ever-changing. At Fast hosts we appreciate it’s essential that you can 
adapt to these developments, with the ability to make changes In an Instant. 

With over 13 years* experience we are dedicated to providing you with powerful, flexible and 
secure technology through our wholly-owned and managed UK data centres 

Plus with dedicated 24/7 phone & online support Fasthosts are always here, supporting 
you every step of the way. 

For help and advice call us now on 0800 6520 444 


WEB HOSTING - DOMAINS - EMAIL • DEDICATED SERVERS • VIRTUAL SERVERS • RESELLER HOSTING 



Making business work better online 


fasthosts.co.uk 

or call 0800 6520 444 * H □ Li 
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greatdigitalniags - The official download website of imagine Pubhsr 


HOME SUBSCRIPTIONS CONTACT US 
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360 Magazine 
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No Disc. No Problem 

Many of the files you’re looking for can be 
found on the magazine’s website 

Imagine digital editions to get the most out of your distal 

° ° editions, be sure to enjoy all of our 

, are a new and exciting fantastic features, including: 

\ way to experience our * Zoomab|e text and pictures 
) world-leading magazines ! SSSHS 

and bookazines. • Take your collection with you 

’”m • Read offline 


To buy more Imagine digital editions and for the 
latest issues and best offers, please go to 


www.GreatDigitalMags.com 




























Logo 

The YouTube logo has 
changed very little since 
It conception. It still has 
the same elements and 
font with only the 
background colour 
changing. It still retains 
the same position on the 
page, top left 
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Tables 

Back in 2006 tables were 
still part of the design, 
slowly being superseded 
by dlv tags. YouTube 
used a combination of 
both to create Its simple 
two-column layout. 


Load 

time! 

Page size: 160KB 
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Web 
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second on 
a 2 MB 
connection 


Popular content 

Easier access to popular videos was 
implemented In this version. Users had 
the option to choose which section to 
view and expand the window to have 
access to more content. 



YouTube www.youtube.com 

The world’s most popular video-sharing service still owes 
a debt of gratitude to its early design status 


YouTube is synonymous with video on the web. 
and has spawned a host of copycat services 
since its creation in 2005. The video service is 
about sharing and its design is a tribute to its 
service. Back in the early days. YouTube was its 
Infancy and so was its design and functionality. 
Driven by its primary purpose, the design was 


iiii 


simple, concentrating on displaying videos. In the 
very early days the site was plain, but was quickly 
modified to create a better user experience. The 
design slowly evolved over the interim years, 
concentrating on functionality. In 2011. YouTube 
finally got a major overhaul that offered better 
Google Integration and an improved design. 


In the very early days the site was 
plain, but was quickly modified to create 
a better user experience 
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vCPU 


RAM 



Fully scalable and customisable 

Your VPS specs can be modified on the 
fly to ensure you can meet any sudden 
changes in demand or popularity. 


VPS without compromises 

Affordable yet high-quality VPS hosting 
without compromise. We use branded 
Intel processors and Dell servers in our 
UK data centre. 


Advanced virtualisation technology 

KVM is the latest generation of virtualisation 
technology, offering high-performance 
access to server resources for both Linux and 
Windows virtual private servers. 



From only £11.99 per month 


✓ 24/7 UK Support 


✓ Free & Instant Setup 


✓ 99.99% Uptime SLA 


✓ Full root access 


Find out more: www.heartinternet.co.uk 
Call us: 0845 644 7750 



Web hosting I Reseller hosting I VPS I Servers 


Price excludes VAT at 20% 






HP recommends Windows® 7 Professional. 



Introducing the new HP Z1 Workstation. 
Power without the tower. 

The all-in-one HP Z1 Workstation with the Intel® Xeon® processor 
E3-1200 series. 

To find out more about the HP Z1 Workstation visit: 




€>2012 Hewlett-Packard Development Company, L.P. The Information contained herein is subject to change without notice. 

Intel, Intel logo Intel, Intel Inside, logo, Intel Inside, Xeon and Xeon Inside are trademarks of Intel Corporation in the United States and other countries. 
Microsoft and Windows are trademarks of the companies Microsoft. 






